quasar 2.14.7 → 2.15.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.14.7",
+  "version": "2.15.1",
   "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",
@@ -14,31 +14,6 @@
     "src",
     "wrappers"
   ],
-  "scripts": {
-    "clean": "node build/script.clean.js",
-    "dev": "cd ./dev && node ./script.dev.js dev && cd ..",
-    "dev:build": "cd ./dev && node ./script.build.js dev && cd ..",
-    "dev:ssr": "cd ./dev && node ./script.dev.js dev -m ssr && cd ..",
-    "dev:build:ssr": "cd ./dev && node ./script.build.js dev -m ssr && cd ..",
-    "dev:cordova:ios": "cd ./dev && node ./script.dev.js dev -m cordova -T ios && cd ..",
-    "dev:cordova:android": "cd ./dev && node ./script.dev.js dev -m cordova -T android && cd ..",
-    "dev:capacitor:ios": "cd ./dev && node ./script.dev.js dev -m capacitor -T ios && cd ..",
-    "dev:capacitor:android": "cd ./dev && node ./script.dev.js dev -m capacitor -T android && cd ..",
-    "dev:umd": "node build/script.test-umd.js",
-    "dev:quploader": "cd dev/upload-server && yarn && cd ../.. && node dev/upload-server/server.js",
-    "build": "node build/script.build.js",
-    "lint": "eslint --ext .js,.cjs,.mjs,.vue src dev --report-unused-disable-directives",
-    "lint-fix": "eslint --ext .js,.cjs,.mjs,.vue src dev --fix --report-unused-disable-directives",
-    "format:types": "prettier --write \"types/**/*.{d.ts,ts,json}\"",
-    "test:create": "node ./test/cypress/helpers/create-spec.js -c",
-    "test:build": "yarn build",
-    "test:e2e": "yarn test:build && cross-env NODE_ENV=test start-test \"node ./dev/script.dev.js\" http-get://localhost:9000 \"cypress open --project ./dev --e2e\"",
-    "test:e2e:run": "cross-env NODE_ENV=test start-test \"node ./dev/script.dev.js\" http-get://localhost:9000 \"cypress run --project ./dev --e2e\"",
-    "test:e2e:ci": "yarn test:build && yarn test:e2e:run",
-    "test:component": "yarn test:build && cross-env NODE_ENV=test cypress open --project ./dev --component",
-    "test:component:run": "cross-env NODE_ENV=test cypress run --project ./dev --component",
-    "test:component:ci": "yarn test:build && yarn test:component:run"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/quasarframework/quasar.git"
@@ -71,7 +46,7 @@
   },
   "homepage": "https://quasar.dev",
   "devDependencies": {
-    "@quasar/app-vite": "^2.0.0-beta.1",
+    "@quasar/app-vite": "^2.0.0-beta.5",
     "@quasar/extras": "^1.16.4",
     "@quasar/quasar-app-extension-testing-e2e-cypress": "^6.0.0",
     "autoprefixer": "^10.4.17",
@@ -81,16 +56,8 @@
     "cypress": "^13.6.6",
     "diff": "^5.2.0",
     "esbuild": "^0.20.1",
-    "eslint": "^8.57.0",
-    "eslint-config-standard": "^17.0.0",
-    "eslint-friendly-formatter": "^4.0.1",
     "eslint-plugin-cypress": "^2.13.3",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-n": "^16.6.2",
     "eslint-plugin-no-only-tests": "^3.1.0",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-vue": "^9.22.0",
     "fast-glob": "^3.3.0",
     "fs-extra": "^11.2.0",
     "module-alias": "^2.2.2",
@@ -100,10 +67,10 @@
     "recast": "^0.23.4",
     "table": "^6.8.1",
     "typescript": "^5.3.3",
-    "vite-plugin-checker": "^0.6.4",
     "vue": "^3.4.20",
     "vue-router": "^4.2.1",
-    "yargs": "^17.7.2"
+    "yargs": "^17.7.2",
+    "eslint-config-quasar": "0.0.1"
   },
   "vetur": {
     "tags": "dist/vetur/quasar-tags.json",
@@ -124,5 +91,30 @@
     "node": ">= 10.18.1",
     "npm": ">= 6.13.4",
     "yarn": ">= 1.21.1"
+  },
+  "scripts": {
+    "clean": "node build/script.clean.js",
+    "dev": "cd ./dev && node ./script.dev.js dev && cd ..",
+    "dev:build": "cd ./dev && node ./script.build.js dev && cd ..",
+    "dev:ssr": "cd ./dev && node ./script.dev.js dev -m ssr && cd ..",
+    "dev:build:ssr": "cd ./dev && node ./script.build.js dev -m ssr && cd ..",
+    "dev:cordova:ios": "cd ./dev && node ./script.dev.js dev -m cordova -T ios && cd ..",
+    "dev:cordova:android": "cd ./dev && node ./script.dev.js dev -m cordova -T android && cd ..",
+    "dev:capacitor:ios": "cd ./dev && node ./script.dev.js dev -m capacitor -T ios && cd ..",
+    "dev:capacitor:android": "cd ./dev && node ./script.dev.js dev -m capacitor -T android && cd ..",
+    "dev:umd": "node build/script.test-umd.js",
+    "dev:quploader": "cd dev/upload-server && pnpm i && cd ../.. && node dev/upload-server/server.js",
+    "build": "node build/script.build.js",
+    "lint": "eslint --ext .js,.cjs,.mjs,.vue src dev --report-unused-disable-directives",
+    "lint-fix": "pnpm lint --fix",
+    "format:types": "prettier --write \"types/**/*.{d.ts,ts,json}\"",
+    "test:create": "node ./test/cypress/helpers/create-spec.js -c",
+    "test:build": "pnpm build",
+    "test:e2e": "pnpm test:build && cross-env NODE_ENV=test start-test \"node ./dev/script.dev.js\" http-get://localhost:9000 \"cypress open --project ./dev --e2e\"",
+    "test:e2e:run": "cross-env NODE_ENV=test start-test \"node ./dev/script.dev.js\" http-get://localhost:9000 \"cypress run --project ./dev --e2e\"",
+    "test:e2e:ci": "pnpm test:build && pnpm test:e2e:run",
+    "test:component": "pnpm test:build && cross-env NODE_ENV=test cypress open --project ./dev --component",
+    "test:component:run": "cross-env NODE_ENV=test cypress run --project ./dev --component",
+    "test:component:ci": "pnpm test:build && pnpm test:component:run"
   }
-}
+}

package/src/components/btn-dropdown/QBtnDropdown.js

@@ -6,7 +6,7 @@ import QBtnGroup from '../btn-group/QBtnGroup.js'
 import QMenu from '../menu/QMenu.js'
 
 import { getBtnDesignAttr, useBtnProps } from '../btn/use-btn.js'
-import useId from '../../composables/private/use-id.js'
+import useId from '../../composables/use-id.js'
 import { useTransitionProps } from '../../composables/private/use-transition.js'
 
 import { createComponent } from '../../utils/private/create.js'

package/src/components/color/QColor.js

@@ -11,7 +11,7 @@ import QTabPanels from '../tab-panels/QTabPanels.js'
 import QTabPanel from '../tab-panels/QTabPanel.js'
 
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
-import useCache from '../../composables/private/use-cache.js'
+import useRenderCache from '../../composables/use-render-cache.js'
 import { useFormInject, useFormProps } from '../../composables/private/use-form.js'
 
 import { createComponent } from '../../utils/private/create.js'
@@ -80,7 +80,7 @@ export default createComponent({
     const { $q } = proxy
 
     const isDark = useDark(props, $q)
-    const { getCache } = useCache()
+    const { getCache } = useRenderCache()
 
     const spectrumRef = ref(null)
     const errorIconRef = ref(null)
@@ -290,7 +290,7 @@ export default createComponent({
       updateModel(rgb, change)
     }
 
-    function onHueChange (val, change) {
+    function onHue (val, change) {
       const h = Math.round(val)
       const rgb = hsvToRgb({
         h,
@@ -303,6 +303,10 @@ export default createComponent({
       updateModel(rgb, change)
     }
 
+    function onHueChange (val) {
+      onHue(val, true)
+    }
+
     function onNumericChange (value, formatModel, max, evt, change) {
       evt !== void 0 && stop(evt)
 
@@ -494,6 +498,10 @@ export default createComponent({
       }
     }
 
+    function setTopView (val) {
+      topView.value = val
+    }
+
     function getHeader () {
       const child = []
 
@@ -503,9 +511,7 @@ export default createComponent({
           modelValue: topView.value,
           dense: true,
           align: 'justify',
-          ...getCache('topVTab', {
-            'onUpdate:modelValue': val => { topView.value = val }
-          })
+          'onUpdate:modelValue': setTopView
         }, () => [
           h(QTab, {
             label: 'HEX' + (hasAlpha.value === true ? 'A' : ''),
@@ -586,6 +592,10 @@ export default createComponent({
       ])
     }
 
+    function setView (val) {
+      view.value = val
+    }
+
     function getFooter () {
       return h('div', {
         class: 'q-color-picker__footer relative-position overflow-hidden'
@@ -595,9 +605,7 @@ export default createComponent({
           modelValue: view.value,
           dense: true,
           align: 'justify',
-          ...getCache('ftIn', {
-            'onUpdate:modelValue': val => { view.value = val }
-          })
+          'onUpdate:modelValue': setView
         }, () => [
           h(QTab, {
             icon: $q.iconSet.colorPicker.spectrum,
@@ -660,10 +668,8 @@ export default createComponent({
           selectionColor: 'transparent',
           readonly: editable.value !== true,
           thumbPath,
-          'onUpdate:modelValue': onHueChange,
-          ...getCache('lazyhue', {
-            onChange: val => onHueChange(val, true)
-          })
+          'onUpdate:modelValue': onHue,
+          onChange: onHueChange
         })
       ]
 

package/src/components/date/QDate.js

@@ -3,7 +3,7 @@ import { h, ref, computed, watch, Transition, nextTick, getCurrentInstance } fro
 import QBtn from '../btn/QBtn.js'
 
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
-import useCache from '../../composables/private/use-cache.js'
+import useRenderCache from '../../composables/use-render-cache.js'
 import { useFormProps, useFormAttrs, useFormInject } from '../../composables/private/use-form.js'
 import useDatetime, { useDatetimeProps, useDatetimeEmits, getDayHash } from './use-datetime.js'
 
@@ -90,7 +90,7 @@ export default createComponent({
     const { $q } = proxy
 
     const isDark = useDark(props, $q)
-    const { getCache } = useCache()
+    const { getCache } = useRenderCache()
     const { tabindex, headerClass, getLocale, getCurrentDate } = useDatetime(props, $q)
 
     let lastEmitValue

package/src/components/dialog/QDialog.js

@@ -1,8 +1,8 @@
 import { h, ref, computed, watch, onBeforeUnmount, Transition, getCurrentInstance } from 'vue'
 
 import useHistory from '../../composables/private/use-history.js'
-import useTimeout from '../../composables/private/use-timeout.js'
-import useTick from '../../composables/private/use-tick.js'
+import useTimeout from '../../composables/use-timeout.js'
+import useTick from '../../composables/use-tick.js'
 import useModelToggle, { useModelToggleProps, useModelToggleEmits } from '../../composables/private/use-model-toggle.js'
 import useTransition, { useTransitionProps } from '../../composables/private/use-transition.js'
 import usePortal from '../../composables/private/use-portal.js'
@@ -64,6 +64,8 @@ export default createComponent({
 
     square: Boolean,
 
+    backdropFilter: String,
+
     position: {
       type: String,
       default: 'standard',
@@ -102,6 +104,16 @@ export default createComponent({
       () => defaultTransitions[ props.position ][ 1 ]
     )
 
+    const backdropStyle = computed(() => (
+      transitionStyle.value
+      + (
+        props.backdropFilter !== void 0
+          // Safari requires the -webkit prefix
+          ? `;backdrop-filter:${ props.backdropFilter };-webkit-backdrop-filter:${ props.backdropFilter }`
+          : ''
+      )
+    ))
+
     const { showPortal, hidePortal, portalIsAccessible, renderPortal } = usePortal(
       vm, innerRef, renderPortalContent, 'dialog'
     )
@@ -384,7 +396,7 @@ export default createComponent({
           useBackdrop.value === true
             ? h('div', {
               class: 'q-dialog__backdrop fixed-full',
-              style: transitionStyle.value,
+              style: backdropStyle.value,
               'aria-hidden': 'true',
               tabindex: -1,
               onClick: onBackdropClick

package/src/components/dialog/QDialog.json

@@ -42,6 +42,25 @@
       "category": "content"
     },
 
+    "backdrop-filter": {
+      "type": "String",
+      "desc": "Apply a backdrop filter; The value needs to be the same as in the CSS specs for backdrop-filter; The examples are not an exhaustive list",
+      "examples": [
+        "blur(4px)",
+        "blur(4px) saturate(150%)",
+        "brightness(60%)",
+        "invert(70%)",
+        "grayscale(100%)",
+        "contrast(40%)",
+        "hue-rotate(120deg)",
+        "sepia(90%)",
+        "saturate(80%)",
+        "none"
+      ],
+      "category": "style",
+      "addedIn": "v2.15"
+    },
+
     "maximized": {
       "type": "Boolean",
       "desc": "Put Dialog into maximized mode",

package/src/components/drawer/QDrawer.js

@@ -3,7 +3,7 @@ import { h, withDirectives, ref, computed, watch, onMounted, onBeforeUnmount, ne
 import useHistory from '../../composables/private/use-history.js'
 import useModelToggle, { useModelToggleProps, useModelToggleEmits } from '../../composables/private/use-model-toggle.js'
 import usePreventScroll from '../../composables/private/use-prevent-scroll.js'
-import useTimeout from '../../composables/private/use-timeout.js'
+import useTimeout from '../../composables/use-timeout.js'
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 
 import TouchPan from '../../directives/TouchPan.js'

package/src/components/editor/QEditor.js

@@ -5,7 +5,7 @@ import { getToolbar, getFonts, getLinkEditor } from './editor-utils.js'
 
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 import useFullscreen, { useFullscreenProps, useFullscreenEmits } from '../../composables/private/use-fullscreen.js'
-import useSplitAttrs from '../../composables/private/use-split-attrs.js'
+import useSplitAttrs from '../../composables/use-split-attrs.js'
 
 import { createComponent } from '../../utils/private/create.js'
 import { stopAndPrevent } from '../../utils/event.js'
@@ -85,13 +85,13 @@ export default createComponent({
     'linkHide'
   ],
 
-  setup (props, { slots, emit, attrs }) {
-    const { proxy, vnode } = getCurrentInstance()
+  setup (props, { slots, emit }) {
+    const { proxy } = getCurrentInstance()
     const { $q } = proxy
 
     const isDark = useDark(props, $q)
     const { inFullscreen, toggleFullscreen } = useFullscreen()
-    const splitAttrs = useSplitAttrs(attrs, vnode)
+    const splitAttrs = useSplitAttrs()
 
     const rootRef = ref(null)
     const contentRef = ref(null)

package/src/components/expansion-item/QExpansionItem.js

@@ -8,7 +8,7 @@ import QSlideTransition from '../slide-transition/QSlideTransition.js'
 import QSeparator from '../separator/QSeparator.js'
 
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
-import useId from '../../composables/private/use-id.js'
+import useId from '../../composables/use-id.js'
 import { useRouterLinkProps } from '../../composables/private/use-router-link.js'
 import useModelToggle, { useModelToggleProps, useModelToggleEmits } from '../../composables/private/use-model-toggle.js'
 

package/src/components/fab/QFab.js

@@ -4,7 +4,7 @@ import QBtn from '../btn/QBtn.js'
 import QIcon from '../icon/QIcon.js'
 
 import useFab, { useFabProps } from './use-fab.js'
-import useId from '../../composables/private/use-id.js'
+import useId from '../../composables/use-id.js'
 import useModelToggle, { useModelToggleProps, useModelToggleEmits } from '../../composables/private/use-model-toggle.js'
 
 import { createComponent } from '../../utils/private/create.js'

package/src/components/img/QImg.js

@@ -2,14 +2,15 @@ import { h, ref, computed, watch, onMounted, Transition, getCurrentInstance } fr
 
 import QSpinner from '../spinner/QSpinner.js'
 
+import { isRuntimeSsrPreHydration } from '../../plugins/Platform.js'
 import useRatio, { useRatioProps } from '../../composables/private/use-ratio.js'
 
 import { createComponent } from '../../utils/private/create.js'
 import { hSlot } from '../../utils/private/render.js'
 import { vmIsDestroyed } from '../../utils/private/vm.js'
-import useTimeout from '../../composables/private/use-timeout.js'
+import useTimeout from '../../composables/use-timeout.js'
 
-const defaultRatio = 16 / 9
+const defaultRatio = 1.7778 /* 16/9 */
 
 export default createComponent({
   name: 'QImg',
@@ -49,6 +50,7 @@ export default createComponent({
     },
 
     placeholderSrc: String,
+    errorSrc: String,
 
     fit: {
       type: String,
@@ -80,9 +82,21 @@ export default createComponent({
     const { registerTimeout: registerLoadTimeout, removeTimeout: removeLoadTimeout } = useTimeout()
     const { registerTimeout: registerLoadShowTimeout, removeTimeout: removeLoadShowTimeout } = useTimeout()
 
+    const placeholderImg = computed(() => (
+      props.placeholderSrc !== void 0
+        ? { src: props.placeholderSrc }
+        : null
+    ))
+
+    const errorImg = computed(() => (
+      props.errorSrc !== void 0
+        ? { src: props.errorSrc, __qerror: true }
+        : null
+    ))
+
     const images = [
       ref(null),
-      ref(getPlaceholderSrc())
+      ref(placeholderImg.value)
     ]
 
     const position = ref(0)
@@ -102,6 +116,7 @@ export default createComponent({
     const imgClass = computed(() =>
       `q-img__image ${ props.imgClass !== void 0 ? props.imgClass + ' ' : '' }`
       + `q-img__image--with${ props.noTransition === true ? 'out' : '' }-transition`
+      + ' q-img__image--'
     )
 
     const imgStyle = computed(() => ({
@@ -110,8 +125,6 @@ export default createComponent({
       objectPosition: props.position
     }))
 
-    watch(() => getCurrentSrc(), addImage)
-
     function setLoading () {
       removeLoadShowTimeout()
 
@@ -130,37 +143,6 @@ export default createComponent({
       isLoading.value = false
     }
 
-    function getCurrentSrc () {
-      return props.src || props.srcset || props.sizes
-        ? {
-            src: props.src,
-            srcset: props.srcset,
-            sizes: props.sizes
-          }
-        : null
-    }
-
-    function getPlaceholderSrc () {
-      return props.placeholderSrc !== void 0
-        ? { src: props.placeholderSrc }
-        : null
-    }
-
-    function addImage (imgProps) {
-      removeLoadTimeout()
-      hasError.value = false
-
-      if (imgProps === null) {
-        clearLoading()
-        images[ position.value ^ 1 ].value = getPlaceholderSrc()
-      }
-      else {
-        setLoading()
-      }
-
-      images[ position.value ].value = imgProps
-    }
-
     function onLoad ({ target }) {
       if (vmIsDestroyed(vm) === false) {
         removeLoadTimeout()
@@ -187,14 +169,19 @@ export default createComponent({
       }
     }
 
-    function onReady (img) {
+    function onReady (target) {
       if (vmIsDestroyed(vm) === true) return
 
       position.value = position.value ^ 1
       images[ position.value ].value = null
+
       clearLoading()
-      hasError.value = false
-      emit('load', img.currentSrc || img.src)
+
+      if (target.getAttribute('__qerror') !== 'true') {
+        hasError.value = false
+      }
+
+      emit('load', target.currentSrc || target.src)
     }
 
     function onError (err) {
@@ -202,8 +189,8 @@ export default createComponent({
       clearLoading()
 
       hasError.value = true
-      images[ position.value ].value = null
-      images[ position.value ^ 1 ].value = getPlaceholderSrc()
+      images[ position.value ].value = errorImg.value
+      images[ position.value ^ 1 ].value = placeholderImg.value
 
       emit('error', err)
     }
@@ -229,11 +216,14 @@ export default createComponent({
       }
 
       if (position.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(
@@ -271,13 +261,40 @@ export default createComponent({
     }
 
     if (__QUASAR_SSR_SERVER__ !== true) {
-      if (__QUASAR_SSR_CLIENT__) {
-        onMounted(() => {
-          addImage(getCurrentSrc())
-        })
+      function watchSrc () {
+        watch(
+          () => (
+            props.src || props.srcset || props.sizes
+              ? {
+                  src: props.src,
+                  srcset: props.srcset,
+                  sizes: props.sizes
+                }
+              : null
+          ),
+          imgProps => {
+            removeLoadTimeout()
+            hasError.value = false
+
+            if (imgProps === null) {
+              clearLoading()
+              images[ position.value ^ 1 ].value = placeholderImg.value
+            }
+            else {
+              setLoading()
+            }
+
+            images[ position.value ].value = imgProps
+          },
+          { immediate: true }
+        )
+      }
+
+      if (isRuntimeSsrPreHydration.value === true) {
+        onMounted(watchSrc)
       }
       else {
-        addImage(getCurrentSrc())
+        watchSrc()
       }
     }
 
@@ -290,14 +307,16 @@ export default createComponent({
         )
       }
 
-      if (hasError.value !== true) {
-        if (images[ 0 ].value !== null) {
-          content.push(getImage(0))
-        }
+      if (images[ 0 ].value !== null) {
+        content.push(
+          getImage(0)
+        )
+      }
 
-        if (images[ 1 ].value !== null) {
-          content.push(getImage(1))
-        }
+      if (images[ 1 ].value !== null) {
+        content.push(
+          getImage(1)
+        )
       }
 
       content.push(
@@ -305,6 +324,7 @@ export default createComponent({
       )
 
       return h('div', {
+        key: 'main',
         class: classes.value,
         style: style.value,
         role: 'img',

package/src/components/img/QImg.json

@@ -44,14 +44,28 @@
       "desc": "While waiting for your image to load, you can use a placeholder image",
       "transformAssetUrls": true,
       "examples": [
-        "(public folder) src=\"img/some-placeholder.png\"",
-        "(assets folder) src=\"~assets/my-placeholder.gif\"",
-        "(relative path format) :src=\"require('./placeholder.jpg')\"",
-        "(URL) src=\"https://picsum.photos/500/300\""
+        "(public folder) placeholder-src=\"img/some-placeholder.png\"",
+        "(assets folder) placeholder-src=\"~assets/my-placeholder.gif\"",
+        "(relative path format) :placeholder-src=\"require('./placeholder.jpg')\"",
+        "(URL) placeholder-src=\"https://picsum.photos/500/300\""
       ],
       "category": "model"
     },
 
+    "error-src": {
+      "type": "String",
+      "desc": "In case your image fails to load, you can use an error image",
+      "transformAssetUrls": true,
+      "examples": [
+        "(public folder) error-src=\"img/some-placeholder.png\"",
+        "(assets folder) error-src=\"~assets/my-placeholder.gif\"",
+        "(relative path format) :error-src=\"require('./placeholder.jpg')\"",
+        "(URL) error-src=\"https://picsum.photos/500/300\""
+      ],
+      "category": "model",
+      "addedIn": "v2.15"
+    },
+
     "ratio": {
       "desc": "Force the component to maintain an aspect ratio",
       "examples": [
@@ -167,13 +181,13 @@
       "type": "String",
       "desc": "Specifies an alternate text for the image, if the image cannot be displayed",
       "examples": [ "Two cats" ],
-      "category": "content"
+      "category": "miscellaneous"
     },
 
     "draggable": {
       "type": "Boolean",
       "desc": "Adds the native 'draggable' attribute",
-      "category": "behavior"
+      "category": "miscellaneous"
     },
 
     "img-class": {

package/src/components/menu/QMenu.js

@@ -6,8 +6,8 @@ import useModelToggle, { useModelToggleProps, useModelToggleEmits } from '../../
 import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
 import usePortal from '../../composables/private/use-portal.js'
 import useTransition, { useTransitionProps } from '../../composables/private/use-transition.js'
-import useTick from '../../composables/private/use-tick.js'
-import useTimeout from '../../composables/private/use-timeout.js'
+import useTick from '../../composables/use-tick.js'
+import useTimeout from '../../composables/use-timeout.js'
 
 import { createComponent } from '../../utils/private/create.js'
 import { closePortalMenus } from '../../utils/private/portal.js'