quasar 2.11.6 → 2.11.8

package/dist/quasar.css

@@ -2269,7 +2269,7 @@ body.q-ios-padding .q-dialog__inner > div {
 .q-field__native:-webkit-autofill + .q-field__label, .q-field__input:-webkit-autofill + .q-field__label {
   transform: translateY(-40%) scale(0.75);
 }
-.q-field__native[type=number]:invalid + .q-field__label, .q-field__input[type=number]:invalid + .q-field__label {
+.q-field__native[type=color] + .q-field__label, .q-field__native[type=date] + .q-field__label, .q-field__native[type=datetime-local] + .q-field__label, .q-field__native[type=month] + .q-field__label, .q-field__native[type=time] + .q-field__label, .q-field__native[type=week] + .q-field__label, .q-field__input[type=color] + .q-field__label, .q-field__input[type=date] + .q-field__label, .q-field__input[type=datetime-local] + .q-field__label, .q-field__input[type=month] + .q-field__label, .q-field__input[type=time] + .q-field__label, .q-field__input[type=week] + .q-field__label {
   transform: translateY(-40%) scale(0.75);
 }
 .q-field__native:invalid, .q-field__input:invalid {
@@ -2549,7 +2549,7 @@ body.q-ios-padding .q-dialog__inner > div {
 .q-field--dense .q-field__native:-webkit-autofill + .q-field__label, .q-field--dense .q-field__input:-webkit-autofill + .q-field__label {
   transform: translateY(-30%) scale(0.75);
 }
-.q-field--dense .q-field__native[type=number]:invalid + .q-field__label, .q-field--dense .q-field__input[type=number]:invalid + .q-field__label {
+.q-field--dense .q-field__native[type=color] + .q-field__label, .q-field--dense .q-field__native[type=date] + .q-field__label, .q-field--dense .q-field__native[type=datetime-local] + .q-field__label, .q-field--dense .q-field__native[type=month] + .q-field__label, .q-field--dense .q-field__native[type=time] + .q-field__label, .q-field--dense .q-field__native[type=week] + .q-field__label, .q-field--dense .q-field__input[type=color] + .q-field__label, .q-field--dense .q-field__input[type=date] + .q-field__label, .q-field--dense .q-field__input[type=datetime-local] + .q-field__label, .q-field--dense .q-field__input[type=month] + .q-field__label, .q-field--dense .q-field__input[type=time] + .q-field__label, .q-field--dense .q-field__input[type=week] + .q-field__label {
   transform: translateY(-30%) scale(0.75);
 }
 .q-field--borderless .q-field__bottom, .q-field--borderless.q-field--dense .q-field__control, .q-field--standard .q-field__bottom, .q-field--standard.q-field--dense .q-field__control {

package/dist/quasar.esm.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.
  */
@@ -1651,7 +1651,7 @@ function prepareApp (app, uiOpts, pluginOpts) {
 }
 
 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) {
@@ -13841,8 +13841,8 @@ var QDate = 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);
       }
     });
 
@@ -13852,12 +13852,8 @@ var QDate = 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 => {
@@ -14039,7 +14035,7 @@ var QDate = 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) {
@@ -14054,6 +14050,11 @@ var QDate = 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) {
@@ -16909,7 +16910,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
@@ -17221,7 +17226,11 @@ var QEditor = createComponent({
     ...useFullscreenEmits,
     'update:modelValue',
     'keydown', 'click', 'mouseup', 'keyup', 'touchend',
-    'focus', 'blur'
+    'focus', 'blur',
+    'dropdownShow',
+    'dropdownHide',
+    'dropdownBeforeShow',
+    'dropdownBeforeHide'
   ],
 
   setup (props, { slots, emit, attrs }) {
@@ -17378,6 +17387,7 @@ var QEditor = createComponent({
       $q,
       props,
       slots,
+      emit,
       // caret (will get injected after mount)
       inFullscreen,
       toggleFullscreen,
@@ -21290,7 +21300,7 @@ const useMaskProps = {
 };
 
 function useMask (props, emit, emitValue, inputRef) {
-  let maskMarked, maskReplaced, computedMask, computedUnmask;
+  let maskMarked, maskReplaced, computedMask, computedUnmask, pastedTextStart, selectionAnchor;
 
   const hasMask = ref(null);
   const innerValue = ref(getInitialMaskedValue());
@@ -21492,8 +21502,15 @@ function useMask (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
       }
@@ -21519,7 +21536,7 @@ function useMask (props, emit, emitValue, inputRef) {
             inp.setSelectionRange(cursor, cursor, 'forward');
           }
           else {
-            moveCursor.rightReverse(inp, cursor, cursor);
+            moveCursor.rightReverse(inp, cursor);
           }
         }
         else {
@@ -21530,11 +21547,11 @@ function useMask (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);
         }
       }
     });
@@ -21550,74 +21567,72 @@ function useMask (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
           }
@@ -21626,45 +21641,48 @@ function useMask (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);
 
@@ -21677,25 +21695,38 @@ function useMask (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);
     }
   }
 
@@ -21786,7 +21817,8 @@ function useMask (props, emit, emitValue, inputRef) {
     hasMask,
     moveCursorForPaste,
     updateMaskValue,
-    onMaskedKeydown
+    onMaskedKeydown,
+    onMaskedClick
   }
 }
 
@@ -21848,7 +21880,7 @@ var QInput = createComponent({
   emits: [
     ...useFieldEmits,
     'paste', 'change',
-    'keydown', 'animationend'
+    'keydown', 'click', 'animationend'
   ],
 
   setup (props, { emit, attrs }) {
@@ -21866,7 +21898,8 @@ var QInput = createComponent({
       hasMask,
       moveCursorForPaste,
       updateMaskValue,
-      onMaskedKeydown
+      onMaskedKeydown,
+      onMaskedClick
     } = useMask(props, emit, emitValue, inputRef);
 
     const formDomProps = useFileFormDomProps(props, /* type guard */ true);
@@ -21903,6 +21936,8 @@ var QInput = createComponent({
 
       if (hasMask.value === true) {
         evt.onKeydown = onMaskedKeydown;
+        // reset selection anchor on pointer selection
+        evt.onClick = onMaskedClick;
       }
 
       if (props.autogrow === true) {
@@ -22112,18 +22147,29 @@ var QInput = 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;
         }
       });
     }
@@ -22200,7 +22246,10 @@ var QInput = createComponent({
       hasValue,
 
       floatingLabel: computed(() =>
-        hasValue.value === true
+        (
+          hasValue.value === true
+          && (props.type !== 'number' || isNaN(innerValue.value) === false)
+        )
         || fieldValueIsFilled(props.displayValue)
       ),
 
@@ -28583,7 +28632,8 @@ var QSelect = createComponent({
 
         return h('div', {
           class: 'q-field__native row items-center',
-          ...attrs
+          ...attrs,
+          ...state.splitAttrs.listeners.value
         }, child)
       },
 
@@ -32871,7 +32921,7 @@ var QTable = createComponent({
 
         if (topLeft !== void 0) {
           child.push(
-            h('div', { class: 'q-table-control' }, [
+            h('div', { class: 'q-table__control' }, [
               topLeft(marginalsScope.value)
             ])
           );
@@ -35141,7 +35191,7 @@ var QTree = createComponent({
     }
 
     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) {
@@ -35164,7 +35214,7 @@ var QTree = createComponent({
       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);
     }
 
@@ -38193,6 +38243,7 @@ var BottomSheet$1 = 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); },
@@ -38224,6 +38275,7 @@ var BottomSheet$1 = 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,
@@ -40591,7 +40643,7 @@ function runSequentialPromises (
  */
 
 const Quasar = {
-  version: '2.11.6',
+  version: '2.11.8',
   install: installQuasar,
   lang: Plugin$8,
   iconSet: Plugin$7