quasar 2.11.6 → 2.11.8

package/dist/quasar.sass

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.11.6
+ * Quasar Framework v2.11.8
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */
@@ -2379,8 +2379,14 @@ $field-transition-label-right-up: .324s cubic-bezier(.4,0,.2,1)
       -webkit-animation-fill-mode: both
     &:-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
   &__native[type="file"]
@@ -2627,8 +2633,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
     .q-field__bottom,
     &.q-field--dense .q-field__control

package/dist/quasar.umd.js

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.11.6
+ * Quasar Framework v2.11.8
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */
@@ -1653,7 +1653,7 @@
   }
 
   var installQuasar = function (parentApp, opts = {}) {
-      const $q = { version: '2.11.6' };
+      const $q = { version: '2.11.8' };
 
       if (globalConfigIsFrozen === false) {
         if (opts.config !== void 0) {
@@ -13843,8 +13843,8 @@
           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);
         }
       });
 
@@ -13854,12 +13854,8 @@
         }
       });
 
-      vue.watch(() => viewModel.value.year, year => {
-        emit('navigation', { year, month: viewModel.value.month });
-      });
-
-      vue.watch(() => viewModel.value.month, month => {
-        emit('navigation', { year: viewModel.value.year, month });
+      vue.watch(() => viewModel.value.year + '|' + viewModel.value.month, () => {
+        emit('navigation', { year: viewModel.value.year, month: viewModel.value.month });
       });
 
       vue.watch(mask, val => {
@@ -14041,7 +14037,7 @@
         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) {
@@ -14056,6 +14052,11 @@
           }
         }
 
+        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) {
@@ -16911,7 +16912,11 @@
       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
@@ -17223,7 +17228,11 @@
       ...useFullscreenEmits,
       'update:modelValue',
       'keydown', 'click', 'mouseup', 'keyup', 'touchend',
-      'focus', 'blur'
+      'focus', 'blur',
+      'dropdownShow',
+      'dropdownHide',
+      'dropdownBeforeShow',
+      'dropdownBeforeHide'
     ],
 
     setup (props, { slots, emit, attrs }) {
@@ -17380,6 +17389,7 @@
         $q,
         props,
         slots,
+        emit,
         // caret (will get injected after mount)
         inFullscreen,
         toggleFullscreen,
@@ -21287,7 +21297,7 @@
   };
 
   function useMask (props, emit, emitValue, inputRef) {
-    let maskMarked, maskReplaced, computedMask, computedUnmask;
+    let maskMarked, maskReplaced, computedMask, computedUnmask, pastedTextStart, selectionAnchor;
 
     const hasMask = vue.ref(null);
     const innerValue = vue.ref(getInitialMaskedValue());
@@ -21489,8 +21499,15 @@
         }
 
         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
         }
@@ -21516,7 +21533,7 @@
               inp.setSelectionRange(cursor, cursor, 'forward');
             }
             else {
-              moveCursor.rightReverse(inp, cursor, cursor);
+              moveCursor.rightReverse(inp, cursor);
             }
           }
           else {
@@ -21527,11 +21544,11 @@
         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);
           }
         }
       });
@@ -21547,74 +21564,72 @@
       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
             }
@@ -21623,45 +21638,48 @@
 
         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);
 
@@ -21674,25 +21692,38 @@
         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);
       }
     }
 
@@ -21783,7 +21814,8 @@
       hasMask,
       moveCursorForPaste,
       updateMaskValue,
-      onMaskedKeydown
+      onMaskedKeydown,
+      onMaskedClick
     }
   }
 
@@ -21845,7 +21877,7 @@
     emits: [
       ...useFieldEmits,
       'paste', 'change',
-      'keydown', 'animationend'
+      'keydown', 'click', 'animationend'
     ],
 
     setup (props, { emit, attrs }) {
@@ -21863,7 +21895,8 @@
         hasMask,
         moveCursorForPaste,
         updateMaskValue,
-        onMaskedKeydown
+        onMaskedKeydown,
+        onMaskedClick
       } = useMask(props, emit, emitValue, inputRef);
 
       const formDomProps = useFileFormDomProps(props, /* type guard */ true);
@@ -21900,6 +21933,8 @@
 
         if (hasMask.value === true) {
           evt.onKeydown = onMaskedKeydown;
+          // reset selection anchor on pointer selection
+          evt.onClick = onMaskedClick;
         }
 
         if (props.autogrow === true) {
@@ -22109,18 +22144,29 @@
           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;
           }
         });
       }
@@ -22197,7 +22243,10 @@
         hasValue,
 
         floatingLabel: vue.computed(() =>
-          hasValue.value === true
+          (
+            hasValue.value === true
+            && (props.type !== 'number' || isNaN(innerValue.value) === false)
+          )
           || fieldValueIsFilled(props.displayValue)
         ),
 
@@ -28580,7 +28629,8 @@
 
           return vue.h('div', {
             class: 'q-field__native row items-center',
-            ...attrs
+            ...attrs,
+            ...state.splitAttrs.listeners.value
           }, child)
         },
 
@@ -32868,7 +32918,7 @@
 
           if (topLeft !== void 0) {
             child.push(
-              vue.h('div', { class: 'q-table-control' }, [
+              vue.h('div', { class: 'q-table__control' }, [
                 topLeft(marginalsScope.value)
               ])
             );
@@ -35138,7 +35188,7 @@
       }
 
       function onClick (node, meta, e, keyboard) {
-        keyboard !== true && blur(meta.key);
+        keyboard !== true && meta.selectable !== false && blur(meta.key);
 
         if (hasSelection.value && meta.selectable) {
           if (props.noSelectionUnset === false) {
@@ -35161,7 +35211,7 @@
         if (e !== void 0) {
           stopAndPrevent(e);
         }
-        keyboard !== true && blur(meta.key);
+        keyboard !== true && meta.selectable !== false && blur(meta.key);
         setExpanded(meta.key, !meta.expanded, node, meta);
       }
 
@@ -38332,6 +38382,7 @@
                 'q-bottom-sheet__item q-hoverable q-focusable cursor-pointer relative-position',
                 action.class
               ],
+              style: action.style,
               tabindex: 0,
               role: 'listitem',
               onClick () { onOk(action); },
@@ -38363,6 +38414,7 @@
             ? vue.h(QSeparator, { spaced: true, dark: isDark.value })
             : vue.h(QItem, {
               class: [ 'q-bottom-sheet__item', action.classes ],
+              style: action.style,
               tabindex: 0,
               clickable: true,
               dark: isDark.value,
@@ -40778,7 +40830,7 @@
    */
 
   var index_umd = {
-    version: '2.11.6',
+    version: '2.11.8',
     install (app, opts) {
       installQuasar(app, {
         components,