quasar 2.7.0 → 2.7.3

package/dist/quasar.sass

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.7.0
+ * Quasar Framework v2.7.3
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */
@@ -646,6 +646,7 @@ input[type='search']::-webkit-search-decoration
   line-height: 1
   width: 1em
   height: 1em
+  flex-shrink: 0
   letter-spacing: normal
   text-transform: none
   white-space: nowrap
@@ -663,8 +664,8 @@ input[type='search']::-webkit-search-decoration
     justify-content: center
   > svg,
   > img
-    width: 1em
-    height: 1em
+    width: 100%
+    height: 100%
 .q-icon,
 .material-icons,
 .material-icons-outlined,
@@ -2656,6 +2657,7 @@ $field-transition-label-right-up: .324s cubic-bezier(.4,0,.2,1)
     font-size: $img-loading-font-size
   &__container
     border-radius: inherit
+    font-size: 0
   &__image
     border-radius: inherit
     width: 100%
@@ -4160,7 +4162,7 @@ body.platform-ios
     &--selected
       transform: scale(.95)
 .q-table--horizontal-separator, .q-table--cell-separator
-  thead th, tbody tr:not(:last-child) td
+  thead th, tbody tr:not(:last-child) > td
     border-bottom-width: 1px
 .q-table--vertical-separator, .q-table--cell-separator
   td, th
@@ -4373,10 +4375,6 @@ body.desktop .q-table > tbody > tr:not(.q-tr--no-hover):hover > td:not(.q-td--no
       min-height: 36px
       &--full
         min-height: 52px
-@media (min-width: $breakpoint-lg-min)
-  .q-header, .q-footer
-    .q-tab__content
-      min-width: 128px
 .q-time
   box-shadow: $shadow-2
   border-radius: $generic-border-radius

package/dist/quasar.umd.js

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.7.0
+ * Quasar Framework v2.7.3
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */
@@ -1603,7 +1603,7 @@
   }
 
   var installQuasar = function (parentApp, opts = {}) {
-      const $q = { version: '2.7.0' };
+      const $q = { version: '2.7.3' };
 
       if (globalConfigIsFrozen === false) {
         if (opts.config !== void 0) {
@@ -2364,7 +2364,7 @@
         style: style.value,
         role: 'alert',
         'aria-label': props.label
-      }, props.label !== void 0 ? props.label : hSlot(slots.default))
+      }, hMergeSlot(slots.default, props.label !== void 0 ? [ props.label ] : []))
     }
   });
 
@@ -3170,8 +3170,8 @@
     }, 50);
   }
 
-  function updateModifiers$1 (ctx, { modifiers, value, arg, instance }) {
-    const cfg = Object.assign({}, instance.$q.config.ripple, modifiers, value);
+  function updateModifiers$1 (ctx, { modifiers, value, arg }) {
+    const cfg = Object.assign({}, ctx.cfg.ripple, modifiers, value);
     ctx.modifiers = {
       early: cfg.early === true,
       stop: cfg.stop === true,
@@ -3186,6 +3186,7 @@
 
         beforeMount (el, binding) {
           const ctx = {
+            cfg: binding.instance.$.appContext.config.globalProperties.$q.config,
             enabled: binding.value !== false,
             modifiers: {},
             abort: [],
@@ -3194,11 +3195,7 @@
               if (
                 ctx.enabled === true
                 && evt.qSkipRipple !== true
-                && (
-                  ctx.modifiers.early === true
-                    ? [ 'mousedown', 'touchstart' ].includes(evt.type) === true
-                    : evt.type === 'click'
-                )
+                && evt.type === (ctx.modifiers.early === true ? 'pointerdown' : 'click')
               ) {
                 showRipple(evt, el, ctx, evt.qKeyEvent === true);
               }
@@ -3221,8 +3218,7 @@
           el.__qripple = ctx;
 
           addEvt(ctx, 'main', [
-            [ el, 'mousedown', 'start', 'passive' ],
-            [ el, 'touchstart', 'start', 'passive' ],
+            [ el, 'pointerdown', 'start', 'passive' ],
             [ el, 'click', 'start', 'passive' ],
             [ el, 'keydown', 'keystart', 'passive' ],
             [ el, 'keyup', 'keystart', 'passive' ]
@@ -3988,7 +3984,7 @@
     }
 
     function pickAnchorEl () {
-      if (props.target === false || props.target === '') {
+      if (props.target === false || props.target === '' || proxy.$el.parentNode === null) {
         anchorEl.value = null;
       }
       else if (props.target === true) {
@@ -7272,22 +7268,23 @@
       props.val !== void 0 && Array.isArray(props.modelValue)
     );
 
-    const index = vue.computed(() => (
-      modelIsArray.value === true
-        ? props.modelValue.indexOf(props.val)
+    const index = vue.computed(() => {
+      const val = vue.toRaw(props.val);
+      return modelIsArray.value === true
+        ? props.modelValue.findIndex(opt => vue.toRaw(opt) === val)
         : -1
-    ));
+    });
 
     const isTrue = vue.computed(() => (
       modelIsArray.value === true
         ? index.value > -1
-        : props.modelValue === props.trueValue
+        : vue.toRaw(props.modelValue) === vue.toRaw(props.trueValue)
     ));
 
     const isFalse = vue.computed(() => (
       modelIsArray.value === true
         ? index.value === -1
-        : props.modelValue === props.falseValue
+        : vue.toRaw(props.modelValue) === vue.toRaw(props.falseValue)
     ));
 
     const isIndeterminate = vue.computed(() =>
@@ -11981,7 +11978,7 @@
     const date = new Date(
       d.year,
       d.month === null ? null : d.month - 1,
-      d.day,
+      d.day === null ? 1 : d.day,
       d.hour,
       d.minute,
       d.second,
@@ -14393,6 +14390,7 @@
 
       persistent: Boolean,
       autoClose: Boolean,
+      allowFocusOutside: Boolean,
 
       noEscDismiss: Boolean,
       noBackdropDismiss: Boolean,
@@ -14697,7 +14695,8 @@
       function onFocusChange (evt) {
         // the focus is not in a vue child component
         if (
-          portalIsAccessible.value === true
+          props.allowFocusOutside !== true
+          && portalIsAccessible.value === true
           && childHasFocus(innerRef.value, evt.target) !== true
         ) {
           focus('[tabindex]:not([tabindex="-1"])');
@@ -18831,6 +18830,7 @@
       + (props.square === true ? ' q-uploader--square no-border-radius' : '')
       + (props.flat === true ? ' q-uploader--flat no-shadow' : '')
       + (props.disable === true ? ' disabled q-uploader--disable' : '')
+      + (dnd.value === true ? ' q-uploader--dnd' : '')
     );
 
     const colorClass = vue.computed(() =>
@@ -21132,7 +21132,7 @@
       const labelAttrs = state.getControl === void 0 && slots.control === void 0
         ? {
             ...state.splitAttrs.attributes.value,
-            'data-autofocus': props.autofocus,
+            'data-autofocus': props.autofocus === true || void 0,
             ...attributes.value
           }
         : attributes.value;
@@ -21325,6 +21325,11 @@
         disabled: state.editable.value !== true
       }));
 
+      const fieldClass = vue.computed(() =>
+        'q-file q-field--auto-height'
+        + (dnd.value === true ? ' q-file--dnd' : '')
+      );
+
       const isAppending = vue.computed(() =>
         props.multiple === true && props.append === true
       );
@@ -21457,7 +21462,7 @@
       }
 
       Object.assign(state, {
-        fieldClass: { value: 'q-file q-field--auto-height' },
+        fieldClass,
         emitValue,
         hasValue,
         inputRef,
@@ -23236,27 +23241,28 @@
   const isJapanese = /[\u3000-\u303f\u3040-\u309f\u30a0-\u30ff\uff00-\uff9f\u4e00-\u9faf\u3400-\u4dbf]/;
   const isChinese = /[\u4e00-\u9fff\u3400-\u4dbf\u{20000}-\u{2a6df}\u{2a700}-\u{2b73f}\u{2b740}-\u{2b81f}\u{2b820}-\u{2ceaf}\uf900-\ufaff\u3300-\u33ff\ufe30-\ufe4f\uf900-\ufaff\u{2f800}-\u{2fa1f}]/u;
   const isKorean = /[\u3131-\u314e\u314f-\u3163\uac00-\ud7a3]/;
+  const isPlainText = /[a-z0-9_ -]$/i;
 
   function useKeyComposition (onInput) {
     return function onComposition (e) {
       if (e.type === 'compositionend' || e.type === 'change') {
-        if (e.target.composing !== true) { return }
-        e.target.composing = false;
+        if (e.target.qComposing !== true) { return }
+        e.target.qComposing = false;
         onInput(e);
       }
-      else if (e.type === 'compositionupdate') {
-        if (
-          typeof e.data === 'string'
-          && isJapanese.test(e.data) === false
-          && isChinese.test(e.data) === false
-          && isKorean.test(e.data) === false
-        ) {
-          e.target.composing = false;
+      else if (
+        e.type === 'compositionupdate'
+        && e.target.qComposing !== true
+        && typeof e.data === 'string'
+      ) {
+        const isComposing = client.is.firefox === true
+          ? isPlainText.test(e.data) === false
+          : isJapanese.test(e.data) === true || isChinese.test(e.data) === true || isKorean.test(e.data) === true;
+
+        if (isComposing === true) {
+          e.target.qComposing = true;
         }
       }
-      else {
-        e.target.composing = true;
-      }
     }
   }
 
@@ -23458,7 +23464,7 @@
       }
 
       function onInput (e) {
-        if (!e || !e.target || e.target.composing === true) {
+        if (!e || !e.target || e.target.qComposing === true) {
           return
         }
 
@@ -24671,7 +24677,7 @@
       const rootRef = vue.ref(null);
       const { refocusTargetEl, refocusTarget } = useRefocusTarget(props, rootRef);
 
-      const isTrue = vue.computed(() => props.modelValue === props.val);
+      const isTrue = vue.computed(() => vue.toRaw(props.modelValue) === vue.toRaw(props.val));
 
       const classes = vue.computed(() =>
         'q-radio cursor-pointer no-outline row inline no-wrap items-center'
@@ -27513,7 +27519,12 @@
   const setOverflowAnchor = window.getComputedStyle(document.body).overflowAnchor === void 0
     ? noop
     : function (contentEl, index) {
-      requestAnimationFrame(() => {
+      if (contentEl === null) {
+        return
+      }
+
+      cancelAnimationFrame(contentEl._qOverflowAnimationFrame);
+      contentEl._qOverflowAnimationFrame = requestAnimationFrame(() => {
         if (contentEl === null) {
           return
         }
@@ -28337,7 +28348,7 @@
 
     emits: [
       ...useFieldEmits,
-      'add', 'remove', 'input-value',
+      'add', 'remove', 'input-value', 'new-value',
       'keyup', 'keypress', 'keydown',
       'filter-abort'
     ],
@@ -28385,7 +28396,6 @@
         localResetVirtualScroll,
         padVirtualScroll,
         onVirtualScrollEvt,
-        reset,
         scrollTo,
         setVirtualScrollSize
       } = useVirtualScroll({
@@ -28479,15 +28489,23 @@
 
       const tabindex = vue.computed(() => (state.focused.value === true ? props.tabindex : -1));
 
-      const comboboxAttrs = vue.computed(() => ({
-        tabindex: props.tabindex,
-        role: 'combobox',
-        'aria-label': props.label,
-        'aria-autocomplete': props.useInput === true ? 'list' : 'none',
-        'aria-expanded': menu.value === true ? 'true' : 'false',
-        'aria-owns': `${ state.targetUid.value }_lb`,
-        'aria-controls': `${ state.targetUid.value }_lb`
-      }));
+      const comboboxAttrs = vue.computed(() => {
+        const attrs = {
+          tabindex: props.tabindex,
+          role: 'combobox',
+          'aria-label': props.label,
+          'aria-autocomplete': props.useInput === true ? 'list' : 'none',
+          'aria-expanded': menu.value === true ? 'true' : 'false',
+          'aria-owns': `${ state.targetUid.value }_lb`,
+          'aria-controls': `${ state.targetUid.value }_lb`
+        };
+
+        if (optionIndex.value >= 0) {
+          attrs[ 'aria-activedescendant' ] = `${ state.targetUid.value }_${ optionIndex.value }`;
+        }
+
+        return attrs
+      });
 
       const listboxAttrs = vue.computed(() => {
         const attrs = {
@@ -29223,7 +29241,7 @@
       function onInput (e) {
         clearTimeout(inputTimer);
 
-        if (e && e.target && e.target.composing === true) {
+        if (e && e.target && e.target.qComposing === true) {
           return
         }
 
@@ -29552,13 +29570,18 @@
         setOptionIndex(optionIndex);
       }
 
-      function rerenderMenu () {
+      function rerenderMenu (newLength, oldLength) {
         if (menu.value === true && state.innerLoading.value === false) {
-          reset();
+          localResetVirtualScroll(-1, true);
 
           vue.nextTick(() => {
             if (menu.value === true && state.innerLoading.value === false) {
-              updateMenu(true);
+              if (newLength > oldLength) {
+                localResetVirtualScroll();
+              }
+              else {
+                updateMenu(true);
+              }
             }
           });
         }
@@ -33602,7 +33625,6 @@
 
       const __containerClass = vue.computed(() =>
         `q-table__container q-table--${ props.separator }-separator column no-wrap`
-        + (props.loading === true ? ' q-table--loading' : '')
         + (props.grid === true ? ' q-table--grid' : cardDefaultClass.value)
         + (isDark.value === true ? ' q-table--dark' : '')
         + (props.dense === true ? ' q-table--dense' : '')
@@ -38083,19 +38105,31 @@
       const applyState = cmd => {
         if (dialogRef.value !== null && dialogRef.value[ cmd ] !== void 0) {
           dialogRef.value[ cmd ]();
+          return
         }
-        else if (
+
+        const target = vm.$.subTree;
+
+        if (target && target.component) {
           // account for "script setup" way of declaring component
-          vm.$.subTree
-          && vm.$.subTree.component
-          && vm.$.subTree.component.proxy
-          && vm.$.subTree.component.proxy[ cmd ]
-        ) {
-          vm.$.subTree.component.proxy[ cmd ]();
-        }
-        else {
-          console.error('[Quasar] Incorrectly defined Dialog component');
+          if (target.component.proxy && target.component.proxy[ cmd ]) {
+            target.component.proxy[ cmd ]();
+            return
+          }
+
+          // account for "script setup" + async component way of declaring component
+          if (
+            target.component.subTree &&
+            target.component.subTree.component &&
+            target.component.subTree.component.proxy &&
+            target.component.subTree.component.proxy[ cmd ]
+          ) {
+            target.component.subTree.component.proxy[ cmd ]();
+            return
+          }
         }
+
+        console.error('[Quasar] Incorrectly defined Dialog component');
       };
 
       const
@@ -39698,7 +39732,7 @@
   });
 
   var index_umd = {
-    version: '2.7.0',
+    version: '2.7.3',
     install (app, opts) {
       installQuasar(app, {
         components,