quasar 2.11.6 → 2.11.8

package/src/components/breadcrumbs/__tests__/{QBreadcrumbsEl.spec.js → QBreadcrumbsEl.cy.js}

@@ -1,4 +1,3 @@
-import { mount } from '@cypress/vue'
 import QBreadcrumbsEl from '../QBreadcrumbsEl.js'
 
 describe('BreadcrumbsEl API', () => {
@@ -8,7 +7,7 @@ describe('BreadcrumbsEl API', () => {
         it('should render a label inside the breadcrumb element', () => {
           const label = 'Breadcrumb label'
 
-          mount(QBreadcrumbsEl, {
+          cy.mount(QBreadcrumbsEl, {
             props: { label }
           })
 
@@ -21,7 +20,7 @@ describe('BreadcrumbsEl API', () => {
         it('should render on the left of the breadcrumb element', () => {
           const icon = 'home'
 
-          mount(QBreadcrumbsEl, {
+          cy.mount(QBreadcrumbsEl, {
             props: { icon }
           })
 
@@ -34,7 +33,7 @@ describe('BreadcrumbsEl API', () => {
         it('should render a custom tag', () => {
           const tag = 'a'
 
-          mount(QBreadcrumbsEl, {
+          cy.mount(QBreadcrumbsEl, {
             props: { tag }
           })
 
@@ -56,7 +55,7 @@ describe('BreadcrumbsEl API', () => {
       it('should render the default slot', () => {
         const label = 'Breadcrumb label'
 
-        mount(QBreadcrumbsEl, {
+        cy.mount(QBreadcrumbsEl, {
           slots: { default: label }
         })
 
@@ -71,7 +70,7 @@ describe('BreadcrumbsEl API', () => {
       it('should emit "click" event when clicked', () => {
         const fn = cy.stub()
 
-        mount(QBreadcrumbsEl, {
+        cy.mount(QBreadcrumbsEl, {
           props: {
             label: 'clicked breadcrumb',
             onClick: fn

package/src/components/btn/__tests__/{QBtn.spec.js → QBtn.cy.js}

@@ -1,4 +1,3 @@
-import { mount } from '@cypress/vue'
 import QBtn from '../QBtn.js'
 
 const defaultOptions = {
@@ -11,7 +10,7 @@ function mountQBtn (options = {}) {
     ...options.props
   }
 
-  return mount(QBtn, options)
+  return cy.mount(QBtn, options)
 }
 
 describe('Btn API', () => {
@@ -118,10 +117,10 @@ describe('Btn API', () => {
           props: {
             onClick: fn
           }
+        }).then(({ wrapper }) => {
+          wrapper.vm.click()
+          return expect(fn).to.be.calledOnce
         })
-
-        cy.get('.q-btn').invoke('click')
-          .then(() => expect(fn).to.be.calledOnce)
       })
     })
   })

package/src/components/btn/__tests__/{use-btn.spec.js → use-btn.cy.js}

@@ -1,4 +1,3 @@
-import { mount } from '@cypress/vue'
 import { createMemoryHistory, createRouter } from 'vue-router'
 import { alignMap, alignValues } from '../../../composables/private/use-align.js'
 import QBtn from '../QBtn.js'
@@ -36,7 +35,7 @@ function mountQBtn (options = {}) {
     }
   })
 
-  return mount(QBtn, options)
+  return cy.mount(QBtn, options)
 }
 
 describe('use-btn API', () => {

package/src/components/chip/__tests__/{QChip.spec.js → QChip.cy.js}

@@ -1,4 +1,3 @@
-import { mount } from '@cypress/vue'
 import QChip, { defaultSizes } from '../QChip.js'
 
 const defaultOptions = {
@@ -13,7 +12,7 @@ function mountQChip (options = {}) {
     ...options.props
   }
 
-  return mount(QChip, options)
+  return cy.mount(QChip, options)
 }
 
 describe('Chip API', () => {

package/src/components/date/QDate.js

@@ -702,8 +702,8 @@ export default createComponent({
         lastEmitValue = 0
       }
       else {
-        const { year, month } = getViewModel(innerMask.value, innerLocale.value)
-        updateViewModel(year, month)
+        const model = getViewModel(innerMask.value, innerLocale.value)
+        updateViewModel(model.year, model.month, model)
       }
     })
 
@@ -713,12 +713,8 @@ export default createComponent({
       }
     })
 
-    watch(() => viewModel.value.year, year => {
-      emit('navigation', { year, month: viewModel.value.month })
-    })
-
-    watch(() => viewModel.value.month, month => {
-      emit('navigation', { year: viewModel.value.year, month })
+    watch(() => viewModel.value.year + '|' + viewModel.value.month, () => {
+      emit('navigation', { year: viewModel.value.year, month: viewModel.value.month })
     })
 
     watch(mask, val => {
@@ -900,7 +896,7 @@ export default createComponent({
       return { year: date.year, month: date.month, day: date.day }
     }
 
-    function updateViewModel (year, month) {
+    function updateViewModel (year, month, time) {
       if (minNav.value !== null && year <= minNav.value.year) {
         year = minNav.value.year
         if (month < minNav.value.month) {
@@ -915,6 +911,11 @@ export default createComponent({
         }
       }
 
+      if (time !== void 0) {
+        const { hour, minute, second, millisecond, timezoneOffset, timeHash } = time
+        Object.assign(viewModel.value, { hour, minute, second, millisecond, timezoneOffset, timeHash })
+      }
+
       const newHash = year + '/' + pad(month) + '/01'
 
       if (newHash !== viewModel.value.dateHash) {

package/src/components/dialog-bottom-sheet/BottomSheet.js

@@ -69,6 +69,7 @@ export default createComponent({
               'q-bottom-sheet__item q-hoverable q-focusable cursor-pointer relative-position',
               action.class
             ],
+            style: action.style,
             tabindex: 0,
             role: 'listitem',
             onClick () { onOk(action) },
@@ -100,6 +101,7 @@ export default createComponent({
           ? h(QSeparator, { spaced: true, dark: isDark.value })
           : h(QItem, {
             class: [ 'q-bottom-sheet__item', action.classes ],
+            style: action.style,
             tabindex: 0,
             clickable: true,
             dark: isDark.value,

package/src/components/editor/QEditor.js

@@ -76,7 +76,11 @@ export default createComponent({
     ...useFullscreenEmits,
     'update:modelValue',
     'keydown', 'click', 'mouseup', 'keyup', 'touchend',
-    'focus', 'blur'
+    'focus', 'blur',
+    'dropdownShow',
+    'dropdownHide',
+    'dropdownBeforeShow',
+    'dropdownBeforeHide'
   ],
 
   setup (props, { slots, emit, attrs }) {
@@ -233,6 +237,7 @@ export default createComponent({
       $q,
       props,
       slots,
+      emit,
       // caret (will get injected after mount)
       inFullscreen,
       toggleFullscreen,

package/src/components/editor/QEditor.json

@@ -269,6 +269,46 @@
           "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"
     }
   },
 

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,38 @@ 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)
     }
     else if (
       e.keyCode === 46 // Delete
       && props.reverseFillMask === true
       && start === end
     ) {
-      moveCursor.rightReverse(inp, start, end, true)
+      moveCursor.rightReverse(inp, end)
     }
   }
 
@@ -540,6 +561,7 @@ export default function (props, emit, emitValue, inputRef) {
     hasMask,
     moveCursorForPaste,
     updateMaskValue,
-    onMaskedKeydown
+    onMaskedKeydown,
+    onMaskedClick
   }
 }