@juit/vue-z 0.0.70 → 0.0.71

package/dist/index.css

@@ -32,7 +32,7 @@
 
 /* Suffix behind the input */
 .z-suffix {
-&[data-v-7f2feeca] {
+&[data-v-8db93553] {
   user-select: none;
   position: absolute;
   top: 0;
@@ -42,9 +42,9 @@
   overflow: hidden;
   font-weight: 500
 }
-.z-suffix-hidden[data-v-7f2feeca] { color: transparent
+.z-suffix-hidden[data-v-8db93553] { color: transparent
 }
-.z-suffix-visible[data-v-7f2feeca] { opacity: 0.5
+.z-suffix-visible[data-v-8db93553] { opacity: 0.5
 }
 }
 
@@ -114,17 +114,17 @@
 }
 
 /* Let padding be done by a.table-link */
-td.q-td[data-v-c1278c50]:has(a.table-link) {
+td.q-td[data-v-719597a3]:has(a.table-link) {
   padding: 0;
   vertical-align: top;
 }
-td.q-td.shrink[data-v-c1278c50] {
+td.q-td.shrink[data-v-719597a3] {
   width: 1px;
 }
 
 /* Turn an "<a href=...>" into a glorified div */
 a.table-link {
-&[data-v-c1278c50] {
+&[data-v-719597a3] {
   display: block;
   color: inherit;
   text-decoration: none;
@@ -134,7 +134,7 @@ a.table-link {
 
   /* center the content vertically */
   }
-> div[data-v-c1278c50] {
+> div[data-v-719597a3] {
     position: relative;
     transform: translateY(-50%);
     top: 50%;
@@ -145,39 +145,39 @@ a.table-link {
 }
 
 /* Remove the top border from the "no-data" bottom slot */
-[data-v-c1278c50] .q-table__bottom--nodata {
+[data-v-719597a3] .q-table__bottom--nodata {
   border-top: none;
 }
 
 /* Colorize loading in the primary color */
-[data-v-c1278c50] .q-linear-progress {
+[data-v-719597a3] .q-linear-progress {
   color: var(--q-primary) !important;
 }
 
 /* Add padding for each cell (basically, cloned the quasar defaults) */
-td.q-td a.table-link[data-v-c1278c50] {
+td.q-td a.table-link[data-v-719597a3] {
   padding: 7px 16px;
 }
-.q-table--dense td.q-td a.table-link[data-v-c1278c50] {
+.q-table--dense td.q-td a.table-link[data-v-719597a3] {
   padding: 4px 8px;
 }
-.q-table--dense td.q-td:first-child a.table-link[data-v-c1278c50] {
+.q-table--dense td.q-td:first-child a.table-link[data-v-719597a3] {
   padding-left: 16px;
 }
-.q-table--dense td.q-td:last-child a.table-link[data-v-c1278c50] {
+.q-table--dense td.q-td:last-child a.table-link[data-v-719597a3] {
   padding-right: 16px;
 }
 
 /* Constrain padding for the table top */
-[data-v-c1278c50] .q-table__top {
+[data-v-719597a3] .q-table__top {
   padding: 12px 16px;
 }
-.q-table--dense[data-v-c1278c50] .q-table__top {
+.q-table--dense[data-v-719597a3] .q-table__top {
   padding: 12px 16px;
 }
 
 /* Default width for search and other inputs */
-.z-table-controls[data-v-c1278c50] .q-input {
+.z-table-controls[data-v-719597a3] .q-input {
   width: 200px;
 }
 
@@ -295,6 +295,7 @@ td.q-td a.table-link[data-v-c1278c50] {
 
       &:hover {
         z-index: 1; /* Remains hovered over other overlapping clickable icons */
+        opacity: 1; /* Remove transparency on hover */
         background-color: var(--q-shade-primary);
         border: 1px solid var(--q-border-color);
         border-radius: calc(var(--q-border-radius) * 0.75);

package/dist/index.d.ts

@@ -1591,6 +1591,12 @@ type: BooleanConstructor;
 required: false;
 default: boolean;
 };
+/** Autofocus on initial render */
+autofocus: {
+type: BooleanConstructor;
+required: false;
+default: boolean;
+};
 /** Indicates that the field is required (and errors when empty). */
 required: {
 type: BooleanConstructor;
@@ -1761,6 +1767,12 @@ type: BooleanConstructor;
 required: false;
 default: boolean;
 };
+/** Autofocus on initial render */
+autofocus: {
+type: BooleanConstructor;
+required: false;
+default: boolean;
+};
 /** Indicates that the field is required (and errors when empty). */
 required: {
 type: BooleanConstructor;
@@ -1833,6 +1845,7 @@ debounce: number | undefined;
 suffix: string;
 prefix: string;
 raw: boolean;
+autofocus: boolean;
 maxLength: number;
 rules: ValidationRule<string>[];
 clearable: boolean;
@@ -2199,7 +2212,6 @@ readonly default: undefined;
 };
 modelValue: {
 type: PropType<ZTableState>;
-required: true;
 };
 selection: {
 type: PropType<any[]>;
@@ -2340,7 +2352,6 @@ readonly default: undefined;
 };
 modelValue: {
 type: PropType<ZTableState>;
-required: true;
 };
 selection: {
 type: PropType<any[]>;
@@ -5014,11 +5025,21 @@ declare type __VLS_Slots_20 = {
 };
 
 declare type __VLS_Slots_21 = {
+    /** Those are _normal_ data slots (that is, within a fully rendered "<q-td>")  */
     [key: `data-${string}`]: (props: {
         index: number;
         row: any;
         value: any;
     }) => VNode[];
+    /** Slot to completely replace the whole "<q-td>" (not even "rowLink" will work) */
+    [key: `cell-${string}`]: (props: {
+        index: number;
+        row: any;
+        col: any;
+        value: any;
+        rowLink: RouteLocationRaw | string | undefined;
+        props: any;
+    }) => VNode[];
     'bottom-row'?: () => VNode[];
     'default'?: () => VNode[];
 };
@@ -5251,8 +5272,8 @@ export declare function createBoundTableState<T extends {
     [k: string]: ZQueryReactiveDef & {
         isFilter?: boolean;
     };
-} = {}>(options: {
-    length: number;
+} = {}>(options?: {
+    length?: number;
     sort?: string;
     desc?: boolean;
     extra?: T;

package/dist/index.js

@@ -1,5 +1,5 @@
 import { QBtnDropdown, QTooltip, QBtnGroup, QBtn, QList, patterns, QInput, QIcon, useDialogPluginComponent, QDialog, QCard, QCardSection, QCardActions, QSeparator, QLinearProgress, QForm, QSelect, QItem, QItemSection, QSpinner, QItemLabel, QPopupProxy, QDate, QChip, is, useQuasar, QTr, QTh, QCheckbox, QTable, QTd, Dialog, Quasar } from "quasar";
-import { defineComponent, ref, useSlots, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot, createCommentVNode, createElementBlock, Fragment, createTextVNode, toDisplayString, inject, reactive, watch, triggerRef, onBeforeUnmount, provide, shallowRef, computed, normalizeProps, guardReactiveProps, useModel, createVNode, normalizeClass, mergeModels, onMounted, createElementVNode, withModifiers, createSlots, renderList, normalizeStyle, nextTick, useAttrs, warn, toRaw, h, getCurrentScope } from "vue";
+import { defineComponent, ref, useSlots, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot, createCommentVNode, createElementBlock, Fragment, createTextVNode, toDisplayString, inject, reactive, watch, triggerRef, onBeforeUnmount, provide, shallowRef, computed, normalizeProps, guardReactiveProps, useModel, createVNode, normalizeClass, mergeModels, onMounted, createElementVNode, withModifiers, createSlots, renderList, normalizeStyle, nextTick, useAttrs, warn, toRaw, getCurrentScope, h } from "vue";
 import { useTranslator, ISO_COUNTRIES } from "@juit/vue-i18n";
 import { RouterLink, useRouter } from "vue-router";
 const iconSet = {
@@ -943,6 +943,12 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
       required: false,
       default: false
     },
+    /** Autofocus on initial render */
+    autofocus: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     /* ===== VALIDATION ======================================================= */
     /** Indicates that the field is required (and errors when empty). */
     required: {
@@ -1021,6 +1027,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
       if (string !== _value.value) _value.value = string;
     }
     const _onClear = computed(() => {
+      if (!_props.clearable) return void 0;
       if (!_props.onClear) return void 0;
       if (!_value.value) return void 0;
       return () => {
@@ -1076,6 +1083,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
       if (_editable.value) _props.onClick?.(event);
     }
     function _onKeydownClear(event) {
+      if (!_props.clearable) return;
       if (!_props.onClear) return;
       const { key, altKey, ctrlKey, metaKey, shiftKey } = event;
       if (altKey || ctrlKey || metaKey || shiftKey) return;
@@ -1156,6 +1164,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
               "hide-bottom-space": !formProps2.bottomSlots,
               "lazy-rules": formProps2.lazyRules,
               debounce: __props.debounce,
+              autofocus: __props.autofocus,
               readonly: _inactive.value || __props.nonInteractive,
               disable: _disabled.value,
               rules: _rules.value,
@@ -1232,7 +1241,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
                 ])) : createCommentVNode("", true)
               ]),
               _: 2
-            }, 1032, ["class", "input-style", "type", "label", "placeholder", "hint", "counter", "maxlength", "bottom-slots", "hide-bottom-space", "lazy-rules", "debounce", "readonly", "disable", "rules", "prefix", "model-value"])
+            }, 1032, ["class", "input-style", "type", "label", "placeholder", "hint", "counter", "maxlength", "bottom-slots", "hide-bottom-space", "lazy-rules", "debounce", "autofocus", "readonly", "disable", "rules", "prefix", "model-value"])
           ]),
           _: 3
         }, 8, ["bottom-slots", "disabled", "editable", "lazy-rules", "readonly"])
@@ -1240,7 +1249,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const ZText = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-7f2feeca"]]);
+const ZText = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-8db93553"]]);
 const _sfc_main$x = /* @__PURE__ */ defineComponent({
   ...{ name: "ZString" },
   __name: "string",
@@ -2084,6 +2093,7 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
           nextTick(() => _qselect.value?.options?.length && _qselect.value?.showPopup());
         }));
       }
+      text;
       _canceled = false;
       /** Cancel this autocompleter */
       cancel() {
@@ -5578,6 +5588,149 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   }
 });
 const ZObject = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-494e69f9"]]);
+function getDefaultValueFor(def, state) {
+  const value = typeof def.default === "function" ? def.default({ ...state }) : def.default;
+  if (def.type === Boolean) return value || false;
+  return value;
+}
+function createBoundObject(definition, useRoutes = false) {
+  if (!getCurrentScope()) throw new Error("No reacive scope found");
+  const object = reactive({});
+  const defs = {};
+  for (const [key, def] of Object.entries(definition)) {
+    object[key] = getDefaultValueFor(def, object);
+    const type = def.type || def;
+    const useRoute = def.useRoute === false ? false : useRoutes;
+    if (type === String || type === Number || type === Boolean) {
+      defs[key] = { type, useRoute, default: def.default };
+      continue;
+    }
+    throw new Error(`Invalid constructor definition "${key}": ${type}`);
+  }
+  if (!useRoutes) return object;
+  const router = useRouter();
+  watch(() => router.currentRoute.value.query, (query) => {
+    for (const [key, def] of Object.entries(defs)) {
+      if (!def.useRoute) continue;
+      const defaultValue = getDefaultValueFor(defs[key], object);
+      const string = Array.isArray(query[key]) ? query[key][0] : query[key];
+      if (def.type === String) {
+        const value = string || defaultValue;
+        if (object[key] !== value) object[key] = value;
+        continue;
+      }
+      if (def.type === Number) {
+        let value = string ? Number(string) : defaultValue;
+        if (typeof value !== "number" || isNaN(value)) value = defaultValue;
+        if (object[key] !== value) object[key] = value;
+        continue;
+      }
+      if (def.type === Boolean) {
+        const value = string === null ? true : (
+          //     "?value&"
+          string === "true" ? true : (
+            //   "?value=t&"
+            string === "t" ? true : (
+              //      "?value=true&"
+              string === "false" ? false : (
+                // "?value=f&"
+                string === "f" ? false : (
+                  //     "?value=false&"
+                  defaultValue || false
+                )
+              )
+            )
+          )
+        );
+        if (object[key] !== value) object[key] = value;
+        continue;
+      }
+    }
+  }, { immediate: true });
+  watch(object, (object2) => {
+    const query = { ...router.currentRoute.value.query };
+    let modified = false;
+    for (const [key, def] of Object.entries(defs)) {
+      if (!def.useRoute) continue;
+      const defaultValue = getDefaultValueFor(defs[key], object2);
+      let value;
+      if (def.type === String || def.type === Number) {
+        value = object2[key] === defaultValue ? void 0 : (
+          // default values are omitted
+          object2[key] === "" ? void 0 : (
+            // empty strings (but not zeroes!!!) are omitted
+            object2[key] === void 0 ? void 0 : (
+              // undefineds are omitted
+              object2[key] === null ? void 0 : (
+                // nulls are omitted
+                String(object2[key])
+              )
+            )
+          )
+        );
+      } else if (def.type === Boolean) {
+        value = object2[key] === defaultValue ? void 0 : (
+          // default values are omitted
+          object2[key] ? null : "f"
+        );
+      }
+      if (value === query[key]) continue;
+      if (value === void 0) delete query[key];
+      else query[key] = value;
+      modified = true;
+    }
+    if (modified) router.replace({ query });
+  }, { immediate: true });
+  return object;
+}
+const tableStateDefs = () => ({
+  // remember, "q" needs to go _before_ "sort" and "desc" by default, so that
+  // its value from the query can be used to set/reset the sort and order
+  /** The optional free-text search to send alongside our query */
+  q: { type: String, default: "", isFilter: true },
+  // sort and desc go *after* q, so that q can affect their value
+  /** The column to sort results on */
+  sort: { type: String, isFilter: true, default: void 0 },
+  /** The order for sorting (`true` for descending) */
+  desc: { type: Boolean, isFilter: true, default: void 0 },
+  // the rest of the properties can be in any order
+  /** A flag indicating if deleted records should be included in the response */
+  deleted: { type: Boolean, default: false, isFilter: true },
+  /** The offset of the first result to return */
+  offset: { type: Number, default: 0 },
+  /** The maximum number of results to return */
+  limit: { type: Number, default: 1 },
+  /** The current reload count */
+  reload: { type: Number, default: 0, useRoute: false }
+});
+function createBoundTableState(options = {}) {
+  const { length = Number.MAX_SAFE_INTEGER, sort, desc = false, extra = {}, useRoute = false } = options;
+  const defs = { ...tableStateDefs(), ...extra };
+  if (length > 0) defs.limit.default = length + 1;
+  if (defs.sort.default === void 0) {
+    defs.sort.default = (state2) => {
+      if (state2.q) return void 0;
+      return sort;
+    };
+  }
+  if (defs.desc.default === void 0) {
+    defs.desc.default = (state2) => {
+      if (state2.sort === sort) return desc;
+      return false;
+    };
+  }
+  const state = createBoundObject(defs, useRoute);
+  watch(() => state.q, () => {
+    state.sort = getDefaultValueFor(defs.sort, state);
+    state.desc = getDefaultValueFor(defs.desc, state);
+  });
+  for (const [key, def] of Object.entries(defs)) {
+    if ("isFilter" in def && def.isFilter) {
+      watch(() => state[key], () => state.offset = 0);
+    }
+  }
+  return state;
+}
 const tableProps = {
   /** Make this compact (or not!) */
   dense: {
@@ -6265,7 +6418,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   }, {
     "modelValue": {
       type: Object,
-      required: true
+      required: false,
+      default: () => createBoundTableState()
     },
     "modelModifiers": {},
     "selection": {
@@ -6444,26 +6598,38 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       _: 2
                     }, 1024)) : createCommentVNode("", true),
                     (openBlock(true), createElementBlock(Fragment, null, renderList(scope.cols, (col) => {
-                      return openBlock(), createBlock(unref(QTd), {
-                        key: col.name,
-                        props: scope
-                      }, {
-                        default: withCtx(() => [
-                          createVNode(unref(TableLink), { to: link }, {
-                            default: withCtx(() => [
-                              slots[`data-${col.name}`] ? (openBlock(), createElementBlock("div", _hoisted_4, [
-                                renderSlot(_ctx.$slots, `data-${col.name}`, {
-                                  index: scope.rowIndex,
-                                  row: scope.row,
-                                  value: col.value
-                                }, void 0, true)
-                              ])) : (openBlock(), createElementBlock("div", _hoisted_5, toDisplayString(col.value), 1))
-                            ]),
-                            _: 2
-                          }, 1032, ["to"])
-                        ]),
-                        _: 2
-                      }, 1032, ["props"]);
+                      return openBlock(), createElementBlock(Fragment, {
+                        key: col.name
+                      }, [
+                        slots[`cell-${col.name}`] ? renderSlot(_ctx.$slots, `cell-${col.name}`, {
+                          key: 0,
+                          props: { ...scope, col },
+                          index: scope.rowIndex,
+                          row: scope.row,
+                          col,
+                          value: col.value,
+                          rowLink: link
+                        }, void 0, true) : (openBlock(), createBlock(unref(QTd), {
+                          key: 1,
+                          props: { ...scope, col }
+                        }, {
+                          default: withCtx(() => [
+                            createVNode(unref(TableLink), { to: link }, {
+                              default: withCtx(() => [
+                                slots[`data-${col.name}`] ? (openBlock(), createElementBlock("div", _hoisted_4, [
+                                  renderSlot(_ctx.$slots, `data-${col.name}`, {
+                                    index: scope.rowIndex,
+                                    row: scope.row,
+                                    value: col.value
+                                  }, void 0, true)
+                                ])) : (openBlock(), createElementBlock("div", _hoisted_5, toDisplayString(col.value), 1))
+                              ]),
+                              _: 2
+                            }, 1032, ["to"])
+                          ]),
+                          _: 2
+                        }, 1032, ["props"]))
+                      ], 64);
                     }), 128))
                   ], 64);
                 }), 128))
@@ -6580,150 +6746,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const ZTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c1278c50"]]);
-function getDefaultValueFor(def, state) {
-  const value = typeof def.default === "function" ? def.default({ ...state }) : def.default;
-  if (def.type === Boolean) return value || false;
-  return value;
-}
-function createBoundObject(definition, useRoutes = false) {
-  if (!getCurrentScope()) throw new Error("No reacive scope found");
-  const object = reactive({});
-  const defs = {};
-  for (const [key, def] of Object.entries(definition)) {
-    object[key] = getDefaultValueFor(def, object);
-    const type = def.type || def;
-    const useRoute = def.useRoute === false ? false : useRoutes;
-    if (type === String || type === Number || type === Boolean) {
-      defs[key] = { type, useRoute, default: def.default };
-      continue;
-    }
-    throw new Error(`Invalid constructor definition "${key}": ${type}`);
-  }
-  if (!useRoutes) return object;
-  const router = useRouter();
-  watch(() => router.currentRoute.value.query, (query) => {
-    for (const [key, def] of Object.entries(defs)) {
-      if (!def.useRoute) continue;
-      const defaultValue = getDefaultValueFor(defs[key], object);
-      const string = Array.isArray(query[key]) ? query[key][0] : query[key];
-      if (def.type === String) {
-        const value = string || defaultValue;
-        if (object[key] !== value) object[key] = value;
-        continue;
-      }
-      if (def.type === Number) {
-        let value = string ? Number(string) : defaultValue;
-        if (typeof value !== "number" || isNaN(value)) value = defaultValue;
-        if (object[key] !== value) object[key] = value;
-        continue;
-      }
-      if (def.type === Boolean) {
-        const value = string === null ? true : (
-          //     "?value&"
-          string === "true" ? true : (
-            //   "?value=t&"
-            string === "t" ? true : (
-              //      "?value=true&"
-              string === "false" ? false : (
-                // "?value=f&"
-                string === "f" ? false : (
-                  //     "?value=false&"
-                  defaultValue || false
-                )
-              )
-            )
-          )
-        );
-        if (object[key] !== value) object[key] = value;
-        continue;
-      }
-    }
-  }, { immediate: true });
-  watch(object, (object2) => {
-    const query = { ...router.currentRoute.value.query };
-    let modified = false;
-    for (const [key, def] of Object.entries(defs)) {
-      if (!def.useRoute) continue;
-      const defaultValue = getDefaultValueFor(defs[key], object2);
-      let value;
-      if (def.type === String || def.type === Number) {
-        value = object2[key] === defaultValue ? void 0 : (
-          // default values are omitted
-          object2[key] === "" ? void 0 : (
-            // empty strings (but not zeroes!!!) are omitted
-            object2[key] === void 0 ? void 0 : (
-              // undefineds are omitted
-              object2[key] === null ? void 0 : (
-                // nulls are omitted
-                String(object2[key])
-              )
-            )
-          )
-        );
-      } else if (def.type === Boolean) {
-        value = object2[key] === defaultValue ? void 0 : (
-          // default values are omitted
-          object2[key] ? null : "f"
-        );
-      }
-      if (value === query[key]) continue;
-      if (value === void 0) delete query[key];
-      else query[key] = value;
-      modified = true;
-    }
-    if (modified) router.replace({ query });
-  }, { immediate: true });
-  return object;
-}
-const tableStateDefs = () => ({
-  // remember, "q" needs to go _before_ "sort" and "desc" by default, so that
-  // its value from the query can be used to set/reset the sort and order
-  /** The optional free-text search to send alongside our query */
-  q: { type: String, default: "", isFilter: true },
-  // sort and desc go *after* q, so that q can affect their value
-  /** The column to sort results on */
-  sort: { type: String, isFilter: true, default: void 0 },
-  /** The order for sorting (`true` for descending) */
-  desc: { type: Boolean, isFilter: true, default: void 0 },
-  // the rest of the properties can be in any order
-  /** A flag indicating if deleted records should be included in the response */
-  deleted: { type: Boolean, default: false, isFilter: true },
-  /** The offset of the first result to return */
-  offset: { type: Number, default: 0 },
-  /** The maximum number of results to return */
-  limit: { type: Number, default: 1 },
-  /** The current reload count */
-  reload: { type: Number, default: 0, useRoute: false }
-});
-function createBoundTableState(options) {
-  const { length, sort, desc = false, extra = {}, useRoute = false } = options;
-  const defs = { ...tableStateDefs(), ...extra };
-  if (length > 0) defs.limit.default = length + 1;
-  if (defs.sort.default === void 0) {
-    defs.sort.default = (state2) => {
-      if (state2.q) return void 0;
-      return sort;
-    };
-  }
-  if (defs.desc.default === void 0) {
-    defs.desc.default = (state2) => {
-      if (state2.sort === sort) return desc;
-      return false;
-    };
-  }
-  const state = createBoundObject(defs, useRoute);
-  watch(() => state.q, () => {
-    state.sort = getDefaultValueFor(defs.sort, state);
-    state.desc = getDefaultValueFor(defs.desc, state);
-  });
-  for (const [key, def] of Object.entries(defs)) {
-    if ("isFilter" in def && def.isFilter) {
-      watch(() => state[key], () => state.offset = 0);
-    }
-  }
-  return state;
-}
+const ZTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-719597a3"]]);
 function JuitWidgets(app, quasarConfig = {}) {
   if (!quasarConfig.config) quasarConfig.config = {};
   if (!quasarConfig.config.loading) quasarConfig.config.loading = {};