quasar 2.14.7 → 2.15.0

package/dist/quasar.sass

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.14.7
+ * Quasar Framework v2.15.0
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */

package/dist/quasar.umd.js

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.14.7
+ * Quasar Framework v2.15.0
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */
@@ -1370,7 +1370,7 @@
   }
   var install_quasar_default = false ? function(parentApp, opts = {}, ssrContext) {
     const $q = {
-      version: "2.14.7",
+      version: "2.15.0",
       config: opts.config || {}
     };
     Object.assign(ssrContext, {
@@ -1400,7 +1400,7 @@
       ssrContext
     });
   } : function(parentApp, opts = {}) {
-    const $q = { version: "2.14.7" };
+    const $q = { version: "2.15.0" };
     if (globalConfigIsFrozen === false) {
       if (opts.config !== void 0) {
         Object.assign(globalConfig, opts.config);
@@ -3750,7 +3750,7 @@
     };
   }
 
-  // src/composables/private/use-tick.js
+  // src/composables/use-tick.js
   function use_tick_default() {
     let tickFn;
     const vm2 = getCurrentInstance();
@@ -3773,7 +3773,7 @@
     };
   }
 
-  // src/composables/private/use-timeout.js
+  // src/composables/use-timeout.js
   function use_timeout_default() {
     let timer2 = null;
     const vm2 = getCurrentInstance();
@@ -4602,23 +4602,29 @@
     return hexBytes[b[0]] + hexBytes[b[1]] + hexBytes[b[2]] + hexBytes[b[3]] + "-" + hexBytes[b[4]] + hexBytes[b[5]] + "-" + hexBytes[b[6]] + hexBytes[b[7]] + "-" + hexBytes[b[8]] + hexBytes[b[9]] + "-" + hexBytes[b[10]] + hexBytes[b[11]] + hexBytes[b[12]] + hexBytes[b[13]] + hexBytes[b[14]] + hexBytes[b[15]];
   }
 
-  // src/composables/private/use-id.js
-  function getId(val, requiredId) {
-    return val === void 0 ? requiredId === true ? `f_${uid_default()}` : void 0 : val;
+  // src/composables/use-id.js
+  function parseValue(val) {
+    return val === void 0 || val === null ? null : val;
   }
-  function use_id_default(initialId, requiredId = true) {
+  function getId(val, required) {
+    return val === void 0 || val === null ? required === true ? `f_${uid_default()}` : null : val;
+  }
+  function use_id_default({ getValue, required = true } = {}) {
     if (isRuntimeSsrPreHydration.value === true) {
-      const id3 = ref(initialId);
-      if (requiredId === true && initialId === void 0) {
+      const id3 = getValue !== void 0 ? ref(parseValue(getValue())) : ref(null);
+      if (required === true && id3.value === null) {
         onMounted(() => {
           id3.value = `f_${uid_default()}`;
         });
       }
+      if (getValue !== void 0) {
+        watch(getValue, (newId) => {
+          id3.value = getId(newId, required);
+        });
+      }
       return id3;
     }
-    return ref(
-      getId(initialId, requiredId)
-    );
+    return getValue !== void 0 ? computed(() => getId(getValue(), required)) : ref(`f_${uid_default()}`);
   }
 
   // src/components/btn-dropdown/QBtnDropdown.js
@@ -5239,19 +5245,23 @@
     }
   );
 
-  // src/composables/private/use-cache.js
-  function use_cache_default() {
-    const cache = /* @__PURE__ */ new Map();
+  // src/composables/use-render-cache.js
+  function use_render_cache_default() {
+    let cache = /* @__PURE__ */ Object.create(null);
     return {
-      getCache: false ? function(_, obj) {
-        return obj;
-      } : function(key, obj) {
-        return cache[key] === void 0 ? cache[key] = obj : cache[key];
+      getCache: false ? (_, defaultValue) => typeof defaultValue === "function" ? defaultValue() : defaultValue : (key, defaultValue) => cache[key] === void 0 ? cache[key] = typeof defaultValue === "function" ? defaultValue() : defaultValue : cache[key],
+      setCache(key, obj) {
+        cache[key] = obj;
+      },
+      hasCache(key) {
+        return cache.hasOwnProperty(key);
       },
-      getCacheWithFn: false ? function(_, fn) {
-        return fn();
-      } : function(key, fn) {
-        return cache[key] === void 0 ? cache[key] = fn() : cache[key];
+      clearCache(key) {
+        if (key !== void 0) {
+          delete cache[key];
+        } else {
+          cache = {};
+        }
       }
     };
   }
@@ -5291,7 +5301,7 @@
   var usePanelEmits = ["update:modelValue", "beforeTransition", "transition"];
   function use_panel_default() {
     const { props: props4, emit, proxy } = getCurrentInstance();
-    const { getCacheWithFn } = use_cache_default();
+    const { getCache } = use_render_cache_default();
     let panels, forcedPanelTransition;
     const panelIndex = ref(null);
     const panelTransition = ref(null);
@@ -5403,7 +5413,7 @@
       return props4.keepAlive === true ? [
         h(KeepAlive, keepAliveProps.value, [
           h(
-            needsUniqueKeepAliveWrapper.value === true ? getCacheWithFn(contentKey.value, () => ({ ...PanelWrapper, name: contentKey.value })) : PanelWrapper,
+            needsUniqueKeepAliveWrapper.value === true ? getCache(contentKey.value, () => ({ ...PanelWrapper, name: contentKey.value })) : PanelWrapper,
             { key: contentKey.value, style: transitionStyle.value },
             () => panel
           )
@@ -7374,15 +7384,15 @@
     }
   });
 
-  // src/composables/private/use-can-render.js
-  function use_can_render_default() {
-    const canRender = ref(!isRuntimeSsrPreHydration.value);
-    if (canRender.value === false) {
+  // src/composables/use-hydration.js
+  function use_hydration_default() {
+    const isHydrated = ref(!isRuntimeSsrPreHydration.value);
+    if (isHydrated.value === false) {
       onMounted(() => {
-        canRender.value = true;
+        isHydrated.value = true;
       });
     }
-    return canRender;
+    return { isHydrated };
   }
 
   // src/components/resize-observer/QResizeObserver.js
@@ -7475,7 +7485,7 @@
             emitEvent();
           }
         };
-        const canRender = use_can_render_default();
+        const { isHydrated } = use_hydration_default();
         let curDocView;
         onMounted(() => {
           nextTick(() => {
@@ -7485,7 +7495,7 @@
         });
         onBeforeUnmount(cleanup);
         return () => {
-          if (canRender.value === true) {
+          if (isHydrated.value === true) {
             return h("object", {
               class: "q--avoid-card-border",
               style: resizeProps.style,
@@ -8545,7 +8555,7 @@
       const { proxy } = getCurrentInstance();
       const { $q } = proxy;
       const isDark = use_dark_default(props4, $q);
-      const { getCache } = use_cache_default();
+      const { getCache } = use_render_cache_default();
       const spectrumRef = ref(null);
       const errorIconRef = ref(null);
       const forceHex = computed(() => props4.formatModel === "auto" ? null : props4.formatModel.indexOf("hex") !== -1);
@@ -8661,7 +8671,7 @@
         model.value.v = v;
         updateModel2(rgb2, change);
       }
-      function onHueChange(val, change) {
+      function onHue(val, change) {
         const h2 = Math.round(val);
         const rgb2 = hsvToRgb({
           h: h2,
@@ -8672,6 +8682,9 @@
         model.value.h = h2;
         updateModel2(rgb2, change);
       }
+      function onHueChange(val) {
+        onHueChange(val, true);
+      }
       function onNumericChange(value2, formatModel, max, evt, change) {
         evt !== void 0 && stop(evt);
         if (!/^[0-9]+$/.test(value2)) {
@@ -8809,6 +8822,9 @@
           errorIconRef.value.$el.style.opacity = val ? 1 : 0;
         }
       }
+      function setTopView(val) {
+        topView.value = val;
+      }
       function getHeader() {
         const child = [];
         props4.noHeaderTabs !== true && child.push(
@@ -8817,11 +8833,7 @@
             modelValue: topView.value,
             dense: true,
             align: "justify",
-            ...getCache("topVTab", {
-              "onUpdate:modelValue": (val) => {
-                topView.value = val;
-              }
-            })
+            "onUpdate:modelValue": setTopView
           }, () => [
             h(QTab_default, {
               label: "HEX" + (hasAlpha.value === true ? "A" : ""),
@@ -8890,6 +8902,9 @@
           }, getPaletteTab)
         ]);
       }
+      function setView(val) {
+        view.value = val;
+      }
       function getFooter() {
         return h("div", {
           class: "q-color-picker__footer relative-position overflow-hidden"
@@ -8899,11 +8914,7 @@
             modelValue: view.value,
             dense: true,
             align: "justify",
-            ...getCache("ftIn", {
-              "onUpdate:modelValue": (val) => {
-                view.value = val;
-              }
-            })
+            "onUpdate:modelValue": setView
           }, () => [
             h(QTab_default, {
               icon: $q.iconSet.colorPicker.spectrum,
@@ -8955,10 +8966,8 @@
             selectionColor: "transparent",
             readonly: editable.value !== true,
             thumbPath,
-            "onUpdate:modelValue": onHueChange,
-            ...getCache("lazyhue", {
-              onChange: (val) => onHueChange(val, true)
-            })
+            "onUpdate:modelValue": onHue,
+            onChange: onHueChange
           })
         ];
         hasAlpha.value === true && sliders.push(
@@ -10165,7 +10174,7 @@
       const { proxy } = getCurrentInstance();
       const { $q } = proxy;
       const isDark = use_dark_default(props4, $q);
-      const { getCache } = use_cache_default();
+      const { getCache } = use_render_cache_default();
       const { tabindex, headerClass, getLocale: getLocale2, getCurrentDate } = use_datetime_default(props4, $q);
       let lastEmitValue;
       const formAttrs = useFormAttrs(props4);
@@ -11435,6 +11444,7 @@
       fullWidth: Boolean,
       fullHeight: Boolean,
       square: Boolean,
+      backdropFilter: String,
       position: {
         type: String,
         default: "standard",
@@ -11464,6 +11474,7 @@
         () => defaultTransitions[props4.position][0],
         () => defaultTransitions[props4.position][1]
       );
+      const backdropStyle = computed(() => transitionStyle.value + (props4.backdropFilter !== void 0 ? `;backdrop-filter:${props4.backdropFilter};-webkit-backdrop-filter:${props4.backdropFilter}` : ""));
       const { showPortal, hidePortal, portalIsAccessible, renderPortal } = use_portal_default(
         vm2,
         innerRef,
@@ -11662,7 +11673,7 @@
             appear: true
           }, () => useBackdrop.value === true ? h("div", {
             class: "q-dialog__backdrop fixed-full",
-            style: transitionStyle.value,
+            style: backdropStyle.value,
             "aria-hidden": "true",
             tabindex: -1,
             onClick: onBackdropClick
@@ -13008,9 +13019,10 @@
     }
   }
 
-  // src/composables/private/use-split-attrs.js
+  // src/composables/use-split-attrs.js
   var listenerRE = /^on[A-Z]/;
-  function use_split_attrs_default(attrs, vnode) {
+  function use_split_attrs_default() {
+    const { attrs, vnode } = getCurrentInstance();
     const acc = {
       listeners: ref({}),
       attributes: ref({})
@@ -13163,12 +13175,12 @@
       "linkShow",
       "linkHide"
     ],
-    setup(props4, { slots, emit, attrs }) {
-      const { proxy, vnode } = getCurrentInstance();
+    setup(props4, { slots, emit }) {
+      const { proxy } = getCurrentInstance();
       const { $q } = proxy;
       const isDark = use_dark_default(props4, $q);
       const { inFullscreen, toggleFullscreen } = use_fullscreen_default();
-      const splitAttrs = use_split_attrs_default(attrs, vnode);
+      const splitAttrs = use_split_attrs_default();
       const rootRef = ref(null);
       const contentRef = ref(null);
       const editLinkUrl = ref(null);
@@ -14431,9 +14443,12 @@
   };
   var useFieldEmits = ["update:modelValue", "clear", "focus", "blur", "popupShow", "popupHide"];
   function useFieldState({ requiredForAttr = true, tagProp } = {}) {
-    const { props: props4, attrs, proxy, vnode } = getCurrentInstance();
+    const { props: props4, proxy } = getCurrentInstance();
     const isDark = use_dark_default(props4, proxy.$q);
-    const targetUid = use_id_default(props4.for, requiredForAttr);
+    const targetUid = use_id_default({
+      required: requiredForAttr,
+      getValue: () => props4.for
+    });
     return {
       requiredForAttr,
       tag: tagProp === true ? computed(() => props4.tag) : { value: "label" },
@@ -14444,7 +14459,7 @@
       innerLoading: ref(false),
       focused: ref(false),
       hasPopupOpen: false,
-      splitAttrs: use_split_attrs_default(attrs, vnode),
+      splitAttrs: use_split_attrs_default(),
       targetUid,
       rootRef: ref(null),
       targetRef: ref(null),
@@ -14558,9 +14573,6 @@
       }
       return acc;
     });
-    watch(() => props4.for, (val) => {
-      state.targetUid.value = getId(val, state.requiredForAttr);
-    });
     function focusHandler() {
       const el = document.activeElement;
       let target2 = state.targetRef !== void 0 && state.targetRef.value;
@@ -15705,7 +15717,7 @@
   }
 
   // src/components/img/QImg.js
-  var defaultRatio = 16 / 9;
+  var defaultRatio = 1.7778;
   var QImg_default = createComponent({
     name: "QImg",
     props: {
@@ -15737,6 +15749,7 @@
         default: defaultRatio
       },
       placeholderSrc: String,
+      errorSrc: String,
       fit: {
         type: String,
         default: "cover"
@@ -15760,9 +15773,11 @@
       const vm2 = getCurrentInstance();
       const { registerTimeout: registerLoadTimeout, removeTimeout: removeLoadTimeout } = use_timeout_default();
       const { registerTimeout: registerLoadShowTimeout, removeTimeout: removeLoadShowTimeout } = use_timeout_default();
+      const placeholderImg = computed(() => props4.placeholderSrc !== void 0 ? { src: props4.placeholderSrc } : null);
+      const errorImg = computed(() => props4.errorSrc !== void 0 ? { src: props4.errorSrc, __qerror: true } : null);
       const images = [
         ref(null),
-        ref(getPlaceholderSrc())
+        ref(placeholderImg.value)
       ];
       const position2 = ref(0);
       const isLoading = ref(false);
@@ -15775,14 +15790,13 @@
         height: props4.height
       }));
       const imgClass = computed(
-        () => `q-img__image ${props4.imgClass !== void 0 ? props4.imgClass + " " : ""}q-img__image--with${props4.noTransition === true ? "out" : ""}-transition`
+        () => `q-img__image ${props4.imgClass !== void 0 ? props4.imgClass + " " : ""}q-img__image--with${props4.noTransition === true ? "out" : ""}-transition q-img__image--`
       );
       const imgStyle = computed(() => ({
         ...props4.imgStyle,
         objectFit: props4.fit,
         objectPosition: props4.position
       }));
-      watch(() => getCurrentSrc(), addImage);
       function setLoading() {
         removeLoadShowTimeout();
         if (props4.loadingShowDelay === 0) {
@@ -15797,27 +15811,6 @@
         removeLoadShowTimeout();
         isLoading.value = false;
       }
-      function getCurrentSrc() {
-        return props4.src || props4.srcset || props4.sizes ? {
-          src: props4.src,
-          srcset: props4.srcset,
-          sizes: props4.sizes
-        } : null;
-      }
-      function getPlaceholderSrc() {
-        return props4.placeholderSrc !== void 0 ? { src: props4.placeholderSrc } : null;
-      }
-      function addImage(imgProps) {
-        removeLoadTimeout();
-        hasError.value = false;
-        if (imgProps === null) {
-          clearLoading();
-          images[position2.value ^ 1].value = getPlaceholderSrc();
-        } else {
-          setLoading();
-        }
-        images[position2.value].value = imgProps;
-      }
       function onLoad({ target: target2 }) {
         if (vmIsDestroyed(vm2) === false) {
           removeLoadTimeout();
@@ -15836,21 +15829,23 @@
           }, 50);
         }
       }
-      function onReady(img) {
+      function onReady(target2) {
         if (vmIsDestroyed(vm2) === true)
           return;
         position2.value = position2.value ^ 1;
         images[position2.value].value = null;
         clearLoading();
-        hasError.value = false;
-        emit("load", img.currentSrc || img.src);
+        if (target2.getAttribute("__qerror") !== "true") {
+          hasError.value = false;
+        }
+        emit("load", target2.currentSrc || target2.src);
       }
       function onError(err) {
         removeLoadTimeout();
         clearLoading();
         hasError.value = true;
-        images[position2.value].value = null;
-        images[position2.value ^ 1].value = getPlaceholderSrc();
+        images[position2.value].value = errorImg.value;
+        images[position2.value ^ 1].value = placeholderImg.value;
         emit("error", err);
       }
       function getImage(index) {
@@ -15872,10 +15867,13 @@
           ...img
         };
         if (position2.value === index) {
-          data.class += " q-img__image--waiting";
-          Object.assign(data, { onLoad, onError });
+          Object.assign(data, {
+            class: data.class + "current",
+            onLoad,
+            onError
+          });
         } else {
-          data.class += " q-img__image--loaded";
+          data.class += "loaded";
         }
         return h(
           "div",
@@ -15901,12 +15899,31 @@
         ]);
       }
       if (true) {
-        if (false) {
-          onMounted(() => {
-            addImage(getCurrentSrc());
-          });
+        let watchSrc = function() {
+          watch(
+            () => props4.src || props4.srcset || props4.sizes ? {
+              src: props4.src,
+              srcset: props4.srcset,
+              sizes: props4.sizes
+            } : null,
+            (imgProps) => {
+              removeLoadTimeout();
+              hasError.value = false;
+              if (imgProps === null) {
+                clearLoading();
+                images[position2.value ^ 1].value = placeholderImg.value;
+              } else {
+                setLoading();
+              }
+              images[position2.value].value = imgProps;
+            },
+            { immediate: true }
+          );
+        };
+        if (isRuntimeSsrPreHydration.value === true) {
+          onMounted(watchSrc);
         } else {
-          addImage(getCurrentSrc());
+          watchSrc();
         }
       }
       return () => {
@@ -15916,18 +15933,21 @@
             h("div", { key: "filler", style: ratioStyle.value })
           );
         }
-        if (hasError.value !== true) {
-          if (images[0].value !== null) {
-            content.push(getImage(0));
-          }
-          if (images[1].value !== null) {
-            content.push(getImage(1));
-          }
+        if (images[0].value !== null) {
+          content.push(
+            getImage(0)
+          );
+        }
+        if (images[1].value !== null) {
+          content.push(
+            getImage(1)
+          );
         }
         content.push(
           h(Transition, { name: "q-transition--fade" }, getContent)
         );
         return h("div", {
+          key: "main",
           class: classes.value,
           style: style2.value,
           role: "img",
@@ -17565,9 +17585,9 @@
       placeholder: String
     },
     setup(props4, { slots }) {
-      const canRender = use_can_render_default();
+      const { isHydrated } = use_hydration_default();
       return () => {
-        if (canRender.value === true) {
+        if (isHydrated.value === true) {
           const node2 = hSlot(slots.default);
           return node2 === void 0 ? node2 : node2.length > 1 ? h(props4.tag, {}, node2) : node2[0];
         }
@@ -20592,6 +20612,7 @@
       menuOffset: Array,
       popupContentClass: String,
       popupContentStyle: [String, Array, Object],
+      popupNoRouteDismiss: Boolean,
       useInput: Boolean,
       useChips: Boolean,
       newValueMode: {
@@ -21349,6 +21370,7 @@
           noParentEvent: true,
           noRefocus: true,
           noFocus: true,
+          noRouteDismiss: props4.popupNoRouteDismiss,
           square: squaredMenu.value,
           transitionShow: props4.transitionShow,
           transitionHide: props4.transitionHide,
@@ -21419,6 +21441,7 @@
           transitionShow: transitionShowComputed,
           transitionHide: props4.transitionHide,
           transitionDuration: props4.transitionDuration,
+          noRouteDismiss: props4.popupNoRouteDismiss,
           onBeforeShow: onControlPopupShow,
           onBeforeHide: onDialogBeforeHide,
           onHide: onDialogHide,
@@ -21766,7 +21789,7 @@
       const { proxy } = getCurrentInstance();
       const { $q } = proxy;
       const isDark = use_dark_default(props4, $q);
-      const { getCacheWithFn } = use_cache_default();
+      const { getCache } = use_render_cache_default();
       const contentRef = ref(null);
       let timer2 = null, pan = {}, dirRefs = {}, dirContentRefs = {};
       const langDir = computed(() => $q.lang.rtl === true ? { left: "right", right: "left" } : { left: "left", right: "right" });
@@ -21887,7 +21910,7 @@
           content.push(node);
         } else {
           content.push(
-            withDirectives(node, getCacheWithFn("dir#" + dirs.join(""), () => {
+            withDirectives(node, getCache("dir#" + dirs.join(""), () => {
               const modifiers = {
                 prevent: true,
                 stop: true,
@@ -24118,7 +24141,7 @@
         console.error("QStep needs to be a child of QStepper");
         return emptyRenderFn;
       }
-      const { getCacheWithFn } = use_cache_default();
+      const { getCache } = use_render_cache_default();
       const rootRef = ref(null);
       const isActive = computed(() => $stepper.value.modelValue === props4.name);
       const scrollEvent = computed(() => $q.platform.is.ios !== true && $q.platform.is.chrome === true || isActive.value !== true || $stepper.value.vertical !== true ? {} : {
@@ -24139,7 +24162,7 @@
             $stepper.value.keepAliveProps.value,
             isActive.value === true ? [
               h(
-                $stepper.value.needsUniqueKeepAliveWrapper.value === true ? getCacheWithFn(contentKey.value, () => ({ ...PanelWrapper2, name: contentKey.value })) : PanelWrapper2,
+                $stepper.value.needsUniqueKeepAliveWrapper.value === true ? getCache(contentKey.value, () => ({ ...PanelWrapper2, name: contentKey.value })) : PanelWrapper2,
                 { key: contentKey.value },
                 slots.default
               )
@@ -31185,8 +31208,14 @@
   __export(composables_exports, {
     useDialogPluginComponent: () => use_dialog_plugin_component_default,
     useFormChild: () => use_form_child_default,
+    useHydration: () => use_hydration_default,
+    useId: () => use_id_default,
     useMeta: () => use_meta_default,
-    useQuasar: () => useQuasar
+    useQuasar: () => useQuasar,
+    useRenderCache: () => use_render_cache_default,
+    useSplitAttrs: () => use_split_attrs_default,
+    useTick: () => use_tick_default,
+    useTimeout: () => use_timeout_default
   });
 
   // src/composables/use-dialog-plugin-component.js
@@ -31265,7 +31294,7 @@
     console.error("[ Quasar ] Vue is required to run. Please add a script tag for it before loading Quasar.");
   }
   window.Quasar = {
-    version: "2.14.7",
+    version: "2.15.0",
     install(app2, opts) {
       install_quasar_default(app2, {
         components: components_exports,