quasar 2.11.5 → 2.11.7

package/dist/types/utils.d.ts

@@ -1,5 +1,3 @@
-// Error on "quasar" import shown in IDE is normal, as we only have Components/Directives/Plugins types after the build step
-// The import will work correctly at runtime
 import { QUploader } from "quasar";
 import {
   ComponentOptionsMixin,
@@ -10,17 +8,17 @@ import {
   ExtractPropTypes,
   Ref,
   SetupContext,
-} from 'vue';
-import { MetaOptions } from './meta';
-
-export * from './utils/colors';
-export * from './utils/date';
-export * from './utils/dom';
-export * from './utils/event';
-export * from './utils/format';
-export * from './utils/scroll';
-export * from './utils/is';
-export * from './utils/run-sequential-promises';
+} from "vue";
+import { MetaOptions } from "./meta";
+
+export * from "./utils/colors";
+export * from "./utils/date";
+export * from "./utils/dom";
+export * from "./utils/event";
+export * from "./utils/format";
+export * from "./utils/scroll";
+export * from "./utils/is";
+export * from "./utils/run-sequential-promises";
 
 import { VueStyleObjectProp } from "./api/vue-prop-types";
 
@@ -37,11 +35,15 @@ export function debounce<F extends (...args: any[]) => any>(
   fn: F,
   wait?: number,
   immediate?: boolean
-): F & { cancel(): void };
+): ((this: ThisParameterType<F>, ...args: Parameters<F>) => void) & {
+  cancel(): void;
+};
 
 export function frameDebounce<F extends (...args: any[]) => any>(
-  fn: F,
-): F & { cancel(): void };
+  fn: F
+): ((this: ThisParameterType<F>, ...args: Parameters<F>) => void) & {
+  cancel(): void;
+};
 
 export function exportFile(
   fileName: string,
@@ -69,7 +71,7 @@ interface MorphOptions {
   from: Element | string | (() => Element | null | undefined);
   to?: Element | string | (() => Element | null | undefined);
   onToggle?: () => void;
-  waitFor?: number | 'transitionend' | Promise<any>;
+  waitFor?: number | "transitionend" | Promise<any>;
 
   duration?: number;
   easing?: string;
@@ -88,7 +90,7 @@ interface MorphOptions {
   tweenFromOpacity?: number;
   tweenToOpacity?: number;
 
-  onEnd?: (direction: 'to' | 'from', aborted: boolean) => void;
+  onEnd?: (direction: "to" | "from", aborted: boolean) => void;
 }
 
 export function morph(options: MorphOptions): (abort?: boolean) => boolean;
@@ -102,10 +104,10 @@ export function setCssVar(
 ): void;
 
 export class EventBus {
-  on (event: string, callback: Function, ctx?: any): this;
-  once (event: string, callback: Function, ctx?: any): this;
-  emit (event: string, ...args: any[]): this;
-  off (event: string, callback?: Function): this;
+  on(event: string, callback: Function, ctx?: any): this;
+  once(event: string, callback: Function, ctx?: any): this;
+  emit(event: string, ...args: any[]): this;
+  off(event: string, callback?: Function): this;
 }
 
 interface CreateMetaMixinContext extends ComponentPublicInstance {
@@ -126,7 +128,7 @@ interface InjectPluginFnHelpers {
   uploadedSize: Ref<number>;
   updateFileStatus: (
     file: File,
-    status: 'failed' | 'idle' | 'uploaded' | 'uploading',
+    status: "failed" | "idle" | "uploaded" | "uploading",
     uploadedSize?: number
   ) => void;
   isAlive: () => boolean;
@@ -134,7 +136,7 @@ interface InjectPluginFnHelpers {
 
 interface InjectPluginFnOptions<Props> {
   props: ExtractPropTypes<Props>;
-  emit: SetupContext['emit'];
+  emit: SetupContext["emit"];
   helpers: InjectPluginFnHelpers;
 }
 

package/dist/web-types/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "",
   "framework": "vue",
   "name": "quasar",
-  "version": "2.11.5",
+  "version": "2.11.7",
   "contributions": {
     "html": {
       "types-syntax": "typescript",
@@ -2528,7 +2528,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "description": "URL pointing to a slide background image (use public folder)\n\nExamples:\n(public folder) src=\"img/my-bg.png\"\n(assets folder) src=\"~assets/my-img.png\"\n(relative path format) :src=\"require('./my_img.jpg')\"\n(URL) src=\"https://placeimg.com/500/300/nature\"",
+              "description": "URL pointing to a slide background image (use public folder)\n\nExamples:\n(public folder) src=\"img/my-bg.png\"\n(assets folder) src=\"~assets/my-img.png\"\n(relative path format) :src=\"require('./my_img.jpg')\"\n(URL) src=\"https://picsum.photos/500/300\"",
               "doc-url": "https://v2.quasar.dev/vue-components/carousel"
             }
           ],
@@ -2601,7 +2601,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "description": "URL to the avatar image of the author\n\nExamples:\n(public folder) src=\"boy-avatar.png\"\n(assets folder) src=\"~assets/boy-avatar.png\"\n(relative path format) :src=\"require('./my_img.jpg')\"\n(URL) src=\"https://placeimg.com/500/300/nature\"",
+              "description": "URL to the avatar image of the author\n\nExamples:\n(public folder) src=\"boy-avatar.png\"\n(assets folder) src=\"~assets/boy-avatar.png\"\n(relative path format) :src=\"require('./my_img.jpg')\"\n(URL) src=\"https://picsum.photos/500/300\"",
               "doc-url": "https://v2.quasar.dev/vue-components/chat"
             },
             {
@@ -7291,7 +7291,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "description": "Path to image\n\nExamples:\n(public folder) src=\"img/something.png\"\n(assets folder) src=\"~assets/my-img.gif\"\n(relative path format) :src=\"require('./my_img.jpg')\"\n(URL) src=\"https://placeimg.com/500/300/nature\"",
+              "description": "Path to image\n\nExamples:\n(public folder) src=\"img/something.png\"\n(assets folder) src=\"~assets/my-img.gif\"\n(relative path format) :src=\"require('./my_img.jpg')\"\n(URL) src=\"https://picsum.photos/500/300\"",
               "doc-url": "https://v2.quasar.dev/vue-components/img"
             },
             {
@@ -7318,7 +7318,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "description": "While waiting for your image to load, you can use a placeholder image\n\nExamples:\n(public folder) src=\"img/some-placeholder.png\"\n(assets folder) src=\"~assets/my-placeholder.gif\"\n(relative path format) :src=\"require('./placeholder.jpg')\"\n(URL) src=\"https://placeimg.com/500/300/nature\"",
+              "description": "While waiting for your image to load, you can use a placeholder image\n\nExamples:\n(public folder) src=\"img/some-placeholder.png\"\n(assets folder) src=\"~assets/my-placeholder.gif\"\n(relative path format) :src=\"require('./placeholder.jpg')\"\n(URL) src=\"https://picsum.photos/500/300\"",
               "doc-url": "https://v2.quasar.dev/vue-components/img"
             },
             {
@@ -17505,7 +17505,7 @@
                 "kind": "expression",
                 "type": "string"
               },
-              "description": "URL to the avatar image; Icon takes precedence if used, so it replaces avatar\n\nExamples:\n(public folder) src=\"img/my-bg.png\"\n(assets folder) src=\"~assets/my-img.png\"\n(relative path format) :src=\"require('./my_img.jpg')\"\n(URL) src=\"https://placeimg.com/500/300/nature\"",
+              "description": "URL to the avatar image; Icon takes precedence if used, so it replaces avatar\n\nExamples:\n(public folder) src=\"img/my-bg.png\"\n(assets folder) src=\"~assets/my-img.png\"\n(relative path format) :src=\"require('./my_img.jpg')\"\n(URL) src=\"https://picsum.photos/500/300\"",
               "doc-url": "https://v2.quasar.dev/vue-components/timeline"
             },
             {

package/lang/sl.js

@@ -8,7 +8,7 @@ module.exports = {
   nativeName: 'Slovenski Jezik',
   label: {
     clear: 'Počisti',
-    ok: 'Vredu',
+    ok: 'V redu',
     cancel: 'Prekliči',
     close: 'Zapri',
     set: 'Postavi',

package/lang/sl.mjs

@@ -3,7 +3,7 @@ export default {
   nativeName: 'Slovenski Jezik',
   label: {
     clear: 'Počisti',
-    ok: 'Vredu',
+    ok: 'V redu',
     cancel: 'Prekliči',
     close: 'Zapri',
     set: 'Postavi',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.11.5",
+  "version": "2.11.7",
   "description": "Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time",
   "main": "dist/quasar.cjs.prod.js",
   "module": "dist/quasar.esm.prod.js",
@@ -29,6 +29,7 @@
     "build": "node build/script.build.js",
     "lint": "eslint --ext .js,.vue src dev",
     "lint-fix": "eslint --ext .js,.vue src dev --fix",
+    "format:types": "prettier --write \"types/**/*.{d.ts,ts,json}\"",
     "test:build": "node build/script.build.js js api && node build/script.build.js js transforms",
     "test:component": "yarn test:build && cd ./dev && cypress open-ct && cd ..",
     "test:component:run": "yarn test:build && cd ./dev && cypress run-ct && cd ..",
@@ -67,8 +68,8 @@
   },
   "homepage": "https://quasar.dev",
   "devDependencies": {
-    "@quasar/app-vite": "^1.1.3",
-    "@quasar/extras": "^1.15.9",
+    "@quasar/app-vite": "^1.2.0",
+    "@quasar/extras": "^1.15.11",
     "@quasar/quasar-app-extension-testing-e2e-cypress": "^4.1.2",
     "@rollup/plugin-node-resolve": "^11.2.1",
     "@rollup/plugin-replace": "^2.3.3",
@@ -81,22 +82,23 @@
     "eslint-config-standard": "^17.0.0",
     "eslint-friendly-formatter": "^4.0.1",
     "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-import": "^2.19.1",
-    "eslint-plugin-n": "^15.0.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-n": "^15.6.1",
     "eslint-plugin-no-only-tests": "^2.6.0",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^6.0.0",
+    "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-vue": "^8.0.0",
     "fast-glob": "^3.2.7",
     "module-alias": "^2.2.2",
-    "postcss-rtlcss": "^3.5.3",
-    "prettier": "^2.4.1",
+    "postcss-rtlcss": "^4.0.2",
+    "prettier": "^2.8.3",
     "recast": "^0.18.5",
     "rimraf": "^3.0.1",
     "rollup": "^2.34.0",
     "table": "^6.8.1",
+    "typescript": "^4.9.5",
     "uglify-es": "^3.3.9",
-    "vue": "^3.2.45",
+    "vue": "^3.2.47",
     "vue-router": "^4.1.6",
     "yargs": "^17.6.2"
   },

package/src/components/carousel/QCarouselSlide.json

@@ -22,7 +22,7 @@
         "(public folder) src=\"img/my-bg.png\"",
         "(assets folder) src=\"~assets/my-img.png\"",
         "(relative path format) :src=\"require('./my_img.jpg')\"",
-        "(URL) src=\"https://placeimg.com/500/300/nature\""
+        "(URL) src=\"https://picsum.photos/500/300\""
       ],
       "category": "model"
     }

package/src/components/chat/QChatMessage.json

@@ -44,7 +44,7 @@
         "(public folder) src=\"boy-avatar.png\"",
         "(assets folder) src=\"~assets/boy-avatar.png\"",
         "(relative path format) :src=\"require('./my_img.jpg')\"",
-        "(URL) src=\"https://placeimg.com/500/300/nature\""
+        "(URL) src=\"https://picsum.photos/500/300\""
       ],
       "category": "content"
     },

package/src/components/date/QDate.js

@@ -702,8 +702,8 @@ export default 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)
       }
     })
 
@@ -713,12 +713,8 @@ export default 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 => {
@@ -900,7 +896,7 @@ export default 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) {
@@ -915,6 +911,11 @@ export default 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) {

package/src/components/date/use-datetime.js

@@ -46,7 +46,7 @@ export default function (props, $q) {
   })
 
   const tabindex = computed(() => {
-    return props.editable === true ? 0 : -1
+    return editable.value === true ? 0 : -1
   })
 
   const headerClass = computed(() => {

package/src/components/dialog/QDialog.js

@@ -79,7 +79,6 @@ export default createComponent({
 
   setup (props, { slots, emit, attrs }) {
     const vm = getCurrentInstance()
-    const { proxy: { $q } } = vm
 
     const innerRef = ref(null)
     const showing = ref(false)
@@ -344,7 +343,7 @@ export default createComponent({
         hide(e)
       }
       else if (props.noShake !== true) {
-        shake(e.relatedTarget)
+        shake()
       }
     }
 
@@ -371,8 +370,6 @@ export default createComponent({
 
     onBeforeUnmount(cleanup)
 
-    const backdropEvt = $q.platform.is.ios === true || $q.platform.is.safari ? 'onClick' : 'onFocusin'
-
     function renderPortalContent () {
       return h('div', {
         role: 'dialog',
@@ -390,7 +387,7 @@ export default createComponent({
               style: transitionStyle.value,
               'aria-hidden': 'true',
               tabindex: -1,
-              [ backdropEvt ]: onBackdropClick
+              onClick: onBackdropClick
             })
             : null
         )),

package/src/components/dialog-bottom-sheet/BottomSheet.js

@@ -69,6 +69,7 @@ export default 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) },
@@ -100,6 +101,7 @@ export default 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,

package/src/components/form/QForm.json

@@ -110,10 +110,11 @@
     },
 
     "getValidationComponents": {
-      "desc": "Get array of children vue components that support validation",
+      "desc": "Get an array of children Vue component instances that support Quasar validation API (derived from QField, or using useFormChild()/QFormChildMixin)",
       "returns": {
         "type": "Array",
-        "desc": "Vue components that support Quasar validation API"
+        "tsType": "QFormChildComponent",
+        "desc": "Quasar validation API-compatible Vue component instances"
       }
     }
   }

package/src/components/img/QImg.json

@@ -14,7 +14,7 @@
         "(public folder) src=\"img/something.png\"",
         "(assets folder) src=\"~assets/my-img.gif\"",
         "(relative path format) :src=\"require('./my_img.jpg')\"",
-        "(URL) src=\"https://placeimg.com/500/300/nature\""
+        "(URL) src=\"https://picsum.photos/500/300\""
       ],
       "category": "model"
     },
@@ -47,7 +47,7 @@
         "(public folder) src=\"img/some-placeholder.png\"",
         "(assets folder) src=\"~assets/my-placeholder.gif\"",
         "(relative path format) :src=\"require('./placeholder.jpg')\"",
-        "(URL) src=\"https://placeimg.com/500/300/nature\""
+        "(URL) src=\"https://picsum.photos/500/300\""
       ],
       "category": "model"
     },

package/src/components/input/use-mask.js

@@ -186,7 +186,7 @@ export default function (props, emit, emitValue, inputRef) {
 
     computedMask = mask
     computedUnmask = val => {
-      const unmaskMatch = unmaskMatcher.exec(props.reverseFillMask === true ? val : val.slice(0, mask.length))
+      const unmaskMatch = unmaskMatcher.exec(props.reverseFillMask === true ? val : val.slice(0, mask.length + 1))
       if (unmaskMatch !== null) {
         val = unmaskMatch.slice(1).join('')
       }

package/src/components/layout/QLayout.sass

@@ -1,5 +1,6 @@
 .q-layout
   width: 100%
+  outline: 0
 
 .q-layout-container
   position: relative

package/src/components/slide-transition/QSlideTransition.js

@@ -39,7 +39,7 @@ export default createComponent({
     }
 
     function begin (el, height, done) {
-      el.style.overflowY = 'hidden'
+      // here overflowY is 'hidden'
       if (height !== void 0) {
         el.style.height = `${ height }px`
       }
@@ -61,12 +61,14 @@ export default createComponent({
       let pos = 0
       element = el
 
+      // if animationg overflowY is already 'hidden'
       if (animating === true) {
         cleanup()
         pos = el.offsetHeight === el.scrollHeight ? 0 : void 0
       }
       else {
         lastEvent = 'hide'
+        el.style.overflowY = 'hidden'
       }
 
       begin(el, pos, done)
@@ -95,6 +97,9 @@ export default createComponent({
       }
       else {
         lastEvent = 'show'
+        // we need to set overflowY 'hidden' before calculating the height
+        // or else we get small differences
+        el.style.overflowY = 'hidden'
         pos = el.scrollHeight
       }
 

package/src/components/timeline/QTimelineEntry.json

@@ -37,7 +37,7 @@
         "(public folder) src=\"img/my-bg.png\"",
         "(assets folder) src=\"~assets/my-img.png\"",
         "(relative path format) :src=\"require('./my_img.jpg')\"",
-        "(URL) src=\"https://placeimg.com/500/300/nature\""
+        "(URL) src=\"https://picsum.photos/500/300\""
       ],
       "category": "content"
     },

package/src/components/tree/QTree.js

@@ -626,7 +626,7 @@ export default 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) {
@@ -649,7 +649,7 @@ export default 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)
     }
 

package/src/components/uploader/xhr-uploader-plugin.js

@@ -27,7 +27,7 @@ const props = {
   factory: Function
 }
 
-const emits = [ 'factory-failed', 'uploaded', 'failed', 'uploading' ]
+const emits = [ 'factoryFailed', 'uploaded', 'failed', 'uploading' ]
 
 function injectPlugin ({ props, emit, helpers }) {
   const xhrs = ref([])
@@ -84,7 +84,7 @@ function injectPlugin ({ props, emit, helpers }) {
 
     if (!res) {
       emit(
-        'factory-failed',
+        'factoryFailed',
         new Error('QUploader: factory() does not return properly'),
         files
       )

package/src/components/virtual-scroll/QVirtualScroll.json

@@ -93,11 +93,11 @@
       "scope": {
         "index": {
           "type": "Number",
-          "desc": "Item index in the options list"
+          "desc": "Item index in the items list"
         },
         "item": {
           "type": "Any",
-          "desc": "Item data -- its value is taken from 'options' prop"
+          "desc": "Item data -- its value is taken from 'items' prop"
         }
       }
     }

package/src/composables/private/use-timeout.js

@@ -1,6 +1,6 @@
 import { onDeactivated, onBeforeUnmount, getCurrentInstance } from 'vue'
 
-import { vmIsDestroyed } from '../../utils/private/vm'
+import { vmIsDestroyed } from '../../utils/private/vm.js'
 
 /*
  * Usage:

package/src/css/variables.sass

@@ -584,8 +584,8 @@ $toolbar-title-letter-spacing   : .01em !default
 $toolbar-title-padding          : 0 12px !default
 
 $layout-border                  : 1px solid $separator-color !default
-$layout-shadow                  : 0 0 10px 2px rgba(0,0,0,0.2), 0 0px 10px rgba(0,0,0,0.24) !default
-$layout-shadow-dark             : 0 0 10px 2px rgba(255,255,255,.2), 0 0px 10px rgba(255,255,255,.24) !default
+$layout-shadow                  : 0 0 10px 2px rgba($shadow-color,0.2), 0 0px 10px rgba($shadow-color,0.24) !default
+$layout-shadow-dark             : 0 0 10px 2px rgba($dark-shadow-color,.2), 0 0px 10px rgba($dark-shadow-color,.24) !default
 
 $menu-background                : #fff !default
 $menu-box-shadow                : $shadow-2 !default

package/src/plugins/BottomSheet.json

@@ -38,6 +38,14 @@
                   "examples": [ "my-class" ]
                 },
 
+                "style": {
+                  "type": [ "String", "Array", "Object" ],
+                  "tsType": "VueStyleProp",
+                  "desc": "Style definitions to be attributed to this action element",
+                  "examples": [ "{ padding: '2px' }" ],
+                  "addedIn": "v2.11.7"
+                },
+
                 "icon": {
                   "extends": "icon"
                 },

package/src/plugins/Platform.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-useless-escape */
 
 import { ref, reactive } from 'vue'
-import { injectProp } from '../utils/private/inject-obj-prop'
+import { injectProp } from '../utils/private/inject-obj-prop.js'
 
 /**
  * __ QUASAR_SSR __            -> runs on SSR on client or server

package/src/utils/private/define-reactive-plugin.js

@@ -1,6 +1,6 @@
 
 import { reactive } from 'vue'
-import { injectProp } from './inject-obj-prop'
+import { injectProp } from './inject-obj-prop.js'
 
 export default __QUASAR_SSR_SERVER__
   ? (state, plugin) => {

package/dist/types/api/vue-prop-types.ts

@@ -1,15 +0,0 @@
-export type VueClassObjectProp = {
-  [value: string]: any
-}
-
-export type VueClassProp =
-  | string
-  | Array<VueClassProp>
-  | VueClassObjectProp;
-
-export type VueStyleObjectProp = Partial<CSSStyleDeclaration>;
-
-export type VueStyleProp =
-  | string
-  | Array<VueStyleProp>
-  | VueStyleObjectProp;

package/dist/types/typings.json

@@ -1,4 +0,0 @@
-{
-  "name": "quasar",
-  "main": "index.d.ts"
-}