quasar 2.10.1 → 2.11.0

package/icon-set/svg-mdi-v7.mjs

@@ -0,0 +1,224 @@
+
+/*
+ * DO NOT EDIT THIS FILE. It is automatically generated
+ * from its webfont counterpart (same filename without "svg-" prefix).
+ * Edit that file instead (mdi-v7.mjs).
+ */
+
+import {
+  mdiCheckCircle,
+  mdiAlert,
+  mdiInformation,
+  mdiExclamation,
+  mdiArrowUp,
+  mdiArrowRight,
+  mdiArrowDown,
+  mdiArrowLeft,
+  mdiMenuDown,
+  mdiChevronLeft,
+  mdiChevronRight,
+  mdiGradientVertical,
+  mdiTune,
+  mdiPaletteSwatch,
+  mdiRefresh,
+  mdiChevronUp,
+  mdiChevronDown,
+  mdiCircle,
+  mdiCloseCircle,
+  mdiCheck,
+  mdiClockOutline,
+  mdiCalendarToday,
+  mdiFormatBold,
+  mdiFormatItalic,
+  mdiFormatStrikethroughVariant,
+  mdiFormatUnderline,
+  mdiFormatListBulleted,
+  mdiFormatListNumbered,
+  mdiFormatSubscript,
+  mdiFormatSuperscript,
+  mdiLink,
+  mdiFullscreen,
+  mdiFormatQuoteClose,
+  mdiFormatAlignLeft,
+  mdiFormatAlignCenter,
+  mdiFormatAlignRight,
+  mdiFormatAlignJustify,
+  mdiPrinter,
+  mdiFormatIndentDecrease,
+  mdiFormatIndentIncrease,
+  mdiFormatClear,
+  mdiFormatColorText,
+  mdiFormatSize,
+  mdiMinus,
+  mdiUndo,
+  mdiRedo,
+  mdiFormatHeader1,
+  mdiFormatHeader2,
+  mdiFormatHeader3,
+  mdiFormatHeader4,
+  mdiFormatHeader5,
+  mdiFormatHeader6,
+  mdiCodeTags,
+  mdiNumeric1Box,
+  mdiNumeric2Box,
+  mdiNumeric3Box,
+  mdiNumeric4Box,
+  mdiNumeric5Box,
+  mdiNumeric6Box,
+  mdiNumeric7Box,
+  mdiFormatFont,
+  mdiPlus,
+  mdiClose,
+  mdiAlertCircle,
+  mdiChevronDoubleLeft,
+  mdiChevronDoubleRight,
+  mdiStar,
+  mdiPencil,
+  mdiPlay,
+  mdiPlusBox,
+  mdiCloudUpload,
+  mdiNotificationClearAll,
+  mdiCheckAll
+} from '@quasar/extras/mdi-v7'
+
+export default {
+  name: 'svg-mdi-v7',
+  type: {
+    positive: mdiCheckCircle,
+    negative: mdiAlert,
+    info: mdiInformation,
+    warning: mdiExclamation
+  },
+  arrow: {
+    up: mdiArrowUp,
+    right: mdiArrowRight,
+    down: mdiArrowDown,
+    left: mdiArrowLeft,
+    dropdown: mdiMenuDown
+  },
+  chevron: {
+    left: mdiChevronLeft,
+    right: mdiChevronRight
+  },
+  colorPicker: {
+    spectrum: mdiGradientVertical,
+    tune: mdiTune,
+    palette: mdiPaletteSwatch
+  },
+  pullToRefresh: {
+    icon: mdiRefresh
+  },
+  carousel: {
+    left: mdiChevronLeft,
+    right: mdiChevronRight,
+    up: mdiChevronUp,
+    down: mdiChevronDown,
+    navigationIcon: mdiCircle
+  },
+  chip: {
+    remove: mdiCloseCircle,
+    selected: mdiCheck
+  },
+  datetime: {
+    arrowLeft: mdiChevronLeft,
+    arrowRight: mdiChevronRight,
+    now: mdiClockOutline,
+    today: mdiCalendarToday
+  },
+  editor: {
+    bold: mdiFormatBold,
+    italic: mdiFormatItalic,
+    strikethrough: mdiFormatStrikethroughVariant,
+    underline: mdiFormatUnderline,
+    unorderedList: mdiFormatListBulleted,
+    orderedList: mdiFormatListNumbered,
+    subscript: mdiFormatSubscript,
+    superscript: mdiFormatSuperscript,
+    hyperlink: mdiLink,
+    toggleFullscreen: mdiFullscreen,
+    quote: mdiFormatQuoteClose,
+    left: mdiFormatAlignLeft,
+    center: mdiFormatAlignCenter,
+    right: mdiFormatAlignRight,
+    justify: mdiFormatAlignJustify,
+    print: mdiPrinter,
+    outdent: mdiFormatIndentDecrease,
+    indent: mdiFormatIndentIncrease,
+    removeFormat: mdiFormatClear,
+    formatting: mdiFormatColorText,
+    fontSize: mdiFormatSize,
+    align: mdiFormatAlignLeft,
+    hr: mdiMinus,
+    undo: mdiUndo,
+    redo: mdiRedo,
+    heading: mdiFormatSize,
+    heading1: mdiFormatHeader1,
+    heading2: mdiFormatHeader2,
+    heading3: mdiFormatHeader3,
+    heading4: mdiFormatHeader4,
+    heading5: mdiFormatHeader5,
+    heading6: mdiFormatHeader6,
+    code: mdiCodeTags,
+    size: mdiFormatSize,
+    size1: mdiNumeric1Box,
+    size2: mdiNumeric2Box,
+    size3: mdiNumeric3Box,
+    size4: mdiNumeric4Box,
+    size5: mdiNumeric5Box,
+    size6: mdiNumeric6Box,
+    size7: mdiNumeric7Box,
+    font: mdiFormatFont,
+    viewSource: mdiCodeTags
+  },
+  expansionItem: {
+    icon: mdiChevronDown,
+    denseIcon: mdiMenuDown
+  },
+  fab: {
+    icon: mdiPlus,
+    activeIcon: mdiClose
+  },
+  field: {
+    clear: mdiCloseCircle,
+    error: mdiAlertCircle
+  },
+  pagination: {
+    first: mdiChevronDoubleLeft,
+    prev: mdiChevronLeft,
+    next: mdiChevronRight,
+    last: mdiChevronDoubleRight
+  },
+  rating: {
+    icon: mdiStar
+  },
+  stepper: {
+    done: mdiCheck,
+    active: mdiPencil,
+    error: mdiAlert
+  },
+  tabs: {
+    left: mdiChevronLeft,
+    right: mdiChevronRight,
+    up: mdiChevronUp,
+    down: mdiChevronDown
+  },
+  table: {
+    arrowUp: mdiArrowUp,
+    warning: mdiAlert,
+    firstPage: mdiChevronDoubleLeft,
+    prevPage: mdiChevronLeft,
+    nextPage: mdiChevronRight,
+    lastPage: mdiChevronDoubleRight
+  },
+  tree: {
+    icon: mdiPlay
+  },
+  uploader: {
+    done: mdiCheck,
+    clear: mdiClose,
+    add: mdiPlusBox,
+    upload: mdiCloudUpload,
+    removeQueue: mdiNotificationClearAll,
+    removeUploaded: mdiCheckAll
+  }
+}

package/lang/index.json

@@ -111,6 +111,10 @@
     "isoName": "ja",
     "nativeName": "日本語 (にほんご)"
   },
+  {
+    "isoName": "kz",
+    "nativeName": "Қазақша"
+  },
   {
     "isoName": "km",
     "nativeName": "ខ្មែរ"
@@ -123,10 +127,6 @@
     "isoName": "kur-CKB",
     "nativeName": "کوردی سۆرانی"
   },
-  {
-    "isoName": "kz",
-    "nativeName": "Қазақша"
-  },
   {
     "isoName": "lt",
     "nativeName": "Lithuanian"

package/lang/{kz.js → kk.js}

@@ -1,7 +1,7 @@
 /**
  * DO NOT EDIT THIS FILE. It is automatically generated
  * from its .mjs counterpart (same filename but with .mjs extension).
- * Edit that file instead (kz.mjs).
+ * Edit that file instead (kk.mjs).
  */
 function plurals (n, opts) {
   return opts[ n % 10 === 1 && n % 100 !== 11 ? 0 : n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 10 || n % 100 >= 20) ? 1 : 2 ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.10.1",
+  "version": "2.11.0",
   "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",
@@ -68,7 +68,7 @@
   "homepage": "https://quasar.dev",
   "devDependencies": {
     "@quasar/app-vite": "^1.1.3",
-    "@quasar/extras": "^1.12.0",
+    "@quasar/extras": "^1.15.5",
     "@quasar/quasar-app-extension-testing-e2e-cypress": "^4.1.2",
     "@rollup/plugin-node-resolve": "^11.2.1",
     "@rollup/plugin-replace": "^2.3.3",

package/src/components/btn/QBtn.sass

@@ -52,7 +52,6 @@
         &:before
           box-shadow: $button-shadow-active
 
-
   &--no-uppercase
     text-transform: none
 

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

@@ -77,7 +77,6 @@ export default createComponent({
         'aria-expanded': showing.value === true ? 'true' : 'false',
         'aria-haspopup': 'true',
         'aria-controls': targetUid,
-        'aria-owns': targetUid,
         'aria-label': props.toggleAriaLabel || proxy.$q.lang.label[ showing.value === true ? 'collapse' : 'expand' ](props.label)
       }
 

package/src/components/card/QCard.sass

@@ -37,6 +37,7 @@
 
   &--dark
     border-color: $separator-dark-color
+    box-shadow: $dark-shadow-2
 
   &__section
     position: relative
@@ -69,7 +70,7 @@
     padding: 8px
     align-items: center
 
-    .q-btn
+    .q-btn--rectangle
       padding: 0 8px
 
     &--horiz

package/src/components/chip/QChip.sass

@@ -79,5 +79,9 @@ $chip-height: 2em
     .q-avatar
       border-radius: ($generic-border-radius - 1px) 0 0 ($generic-border-radius - 1px)
 
-body.desktop .q-chip--clickable:focus
-  box-shadow: $shadow-1
+body.desktop
+  .q-chip--clickable:focus
+    box-shadow: $shadow-1
+  &.body--dark
+    .q-chip--clickable:focus
+      box-shadow: $dark-shadow-1

package/src/components/color/QColor.sass

@@ -171,6 +171,7 @@
     background: inherit
 
   &--dark
+    box-shadow: $dark-shadow-2
 
     .q-color-picker__tune-tab input
       border: 1px solid rgba(#fff, .3)

package/src/components/date/QDate.js

@@ -708,7 +708,9 @@ export default createComponent({
     })
 
     watch(view, () => {
-      blurTargetRef.value !== null && blurTargetRef.value.focus()
+      if (blurTargetRef.value !== null && proxy.$el.contains(document.activeElement) === true) {
+        blurTargetRef.value.focus()
+      }
     })
 
     watch(() => viewModel.value.year, year => {

package/src/components/date/QDate.sass

@@ -248,4 +248,5 @@
     width: 310px
 
   &--dark
+    box-shadow: $dark-shadow-2
     border-color: $separator-dark-color

package/src/components/dialog/QDialog.js

@@ -219,7 +219,10 @@ export default createComponent({
       hidePortal()
 
       if (refocusTarget !== null) {
-        refocusTarget.focus()
+        ((evt && evt.type.indexOf('key') === 0
+          ? refocusTarget.closest('[tabindex]:not([tabindex^="-"])')
+          : void 0
+        ) || refocusTarget).focus()
         refocusTarget = null
       }
 
@@ -248,9 +251,9 @@ export default createComponent({
       })
     }
 
-    function shake (refocusTarget) {
-      if (refocusTarget && typeof refocusTarget.focus === 'function') {
-        refocusTarget.focus({ preventScroll: true })
+    function shake (focusTarget) {
+      if (focusTarget && typeof focusTarget.focus === 'function') {
+        focusTarget.focus({ preventScroll: true })
       }
       else {
         focus()
@@ -363,6 +366,8 @@ export default createComponent({
 
     onBeforeUnmount(cleanup)
 
+    const backdropEvt = vm.proxy.$q.platform.is.ios === true ? 'onClick' : 'onFocusin'
+
     function renderPortalContent () {
       return h('div', {
         role: 'dialog',
@@ -380,7 +385,7 @@ export default createComponent({
               style: transitionStyle.value,
               'aria-hidden': 'true',
               tabindex: -1,
-              onFocusin: onBackdropClick
+              [ backdropEvt ]: onBackdropClick
             })
             : null
         )),

package/src/components/dialog/QDialog.sass

@@ -18,7 +18,6 @@
       -webkit-overflow-scrolling: touch
       will-change: scroll-position
       border-radius: $generic-border-radius
-      box-shadow: $shadow-4
 
     &--square > div
       border-radius: 0 !important

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

@@ -143,7 +143,6 @@ export default createComponent({
       return {
         role: 'button',
         'aria-expanded': showing.value === true ? 'true' : 'false',
-        'aria-owns': targetUid,
         'aria-controls': targetUid,
         'aria-label': toggleAriaLabel
       }

package/src/components/fab/QFab.js

@@ -77,13 +77,11 @@ export default createComponent({
 
     const actionAttrs = computed(() => {
       const attrs = {
-        id: targetUid
+        id: targetUid,
+        role: 'menu'
       }
 
-      if (showing.value === true) {
-        attrs.role = 'menu'
-      }
-      else {
+      if (showing.value !== true) {
         attrs[ 'aria-hidden' ] = 'true'
       }
 
@@ -152,7 +150,6 @@ export default createComponent({
         'aria-expanded': showing.value === true ? 'true' : 'false',
         'aria-haspopup': 'true',
         'aria-controls': targetUid,
-        'aria-owns': targetUid,
         onClick: toggle
       }, getTriggerContent),
 

package/src/components/fab/QFab.sass

@@ -137,7 +137,8 @@
 
     &--opened
       opacity: 1
-      transform: scale(1) translate(0, 0)
+      // needed when rtlcss is enabled
+      transform: scale(1) translate(0.1px, 0)
       pointer-events: all
 
   &--align-left

package/src/components/file/QFile.json

@@ -168,6 +168,7 @@
       "desc": "DEPRECATED; Access 'nativeEl' directly; Gets the native input DOM Element",
       "returns": {
         "type": "Element",
+        "tsType": "QFileNativeElement",
         "desc": "The underlying native input DOM Element"
       }
     }
@@ -176,6 +177,7 @@
   "computedProps": {
     "nativeEl": {
       "type": "Element",
+      "tsType": "QFileNativeElement",
       "desc": "The native input DOM Element",
       "addedIn": "v2.10.1"
     }

package/src/components/img/QImg.js

@@ -6,7 +6,6 @@ import useRatio, { useRatioProps } from '../../composables/private/use-ratio.js'
 
 import { createComponent } from '../../utils/private/create.js'
 import { hSlot } from '../../utils/private/render.js'
-import { isRuntimeSsrPreHydration } from '../../plugins/Platform.js'
 
 const defaultRatio = 16 / 9
 
@@ -74,7 +73,7 @@ export default createComponent({
 
     const images = [
       ref(null),
-      ref(props.placeholderSrc !== void 0 ? { src: props.placeholderSrc } : null)
+      ref(getPlaceholderSrc())
     ]
 
     const position = ref(0)
@@ -114,18 +113,24 @@ export default createComponent({
         : null
     }
 
+    function getPlaceholderSrc () {
+      return props.placeholderSrc !== void 0
+        ? { src: props.placeholderSrc }
+        : null
+    }
+
     function addImage (imgProps) {
       clearTimeout(loadTimer)
       hasError.value = false
 
       if (imgProps === null) {
         isLoading.value = false
-        images[ 0 ].value = null
-        images[ 1 ].value = null
-        return
+        images[ position.value ^ 1 ].value = getPlaceholderSrc()
+      }
+      else {
+        isLoading.value = true
       }
 
-      isLoading.value = true
       images[ position.value ].value = imgProps
     }
 
@@ -160,7 +165,7 @@ export default createComponent({
       // if component has been already destroyed
       if (loadTimer === null) { return }
 
-      position.value = position.value === 1 ? 0 : 1
+      position.value = position.value ^ 1
       images[ position.value ].value = null
       isLoading.value = false
       hasError.value = false
@@ -171,19 +176,11 @@ export default createComponent({
       clearTimeout(loadTimer)
       isLoading.value = false
       hasError.value = true
-      images[ 0 ].value = null
-      images[ 1 ].value = null
+      images[ position.value ].value = null
+      images[ position.value ^ 1 ].value = getPlaceholderSrc()
       emit('error', err)
     }
 
-    function getContainer (key, child) {
-      return h(
-        'div',
-        { class: 'q-img__container absolute-full', key },
-        child
-      )
-    }
-
     function getImage (index) {
       const img = images[ index ].value
 
@@ -211,7 +208,11 @@ export default createComponent({
         data.class += ' q-img__image--loaded'
       }
 
-      return getContainer('img' + index, h('img', data))
+      return h(
+        'div',
+        { class: 'q-img__container absolute-full', key: 'img' + index },
+        h('img', data)
+      )
     }
 
     function getContent () {
@@ -242,7 +243,7 @@ export default createComponent({
     }
 
     if (__QUASAR_SSR_SERVER__ !== true) {
-      if (__QUASAR_SSR_CLIENT__ && isRuntimeSsrPreHydration.value === true) {
+      if (__QUASAR_SSR_CLIENT__) {
         onMounted(() => {
           addImage(getCurrentSrc())
         })

package/src/components/input/QInput.js

@@ -40,7 +40,8 @@ export default createComponent({
 
   emits: [
     ...useFieldEmits,
-    'paste', 'change'
+    'paste', 'change',
+    'keydown', 'animationend'
   ],
 
   setup (props, { emit, attrs }) {
@@ -98,7 +99,7 @@ export default createComponent({
       }
 
       if (props.autogrow === true) {
-        evt.onAnimationend = adjustHeight
+        evt.onAnimationend = onAnimationend
       }
 
       return evt
@@ -253,6 +254,11 @@ export default createComponent({
       props.autogrow === true && adjustHeight()
     }
 
+    function onAnimationend (e) {
+      emit('animationend', e)
+      adjustHeight()
+    }
+
     function emitValue (val, stopWatcher) {
       emitValueFn = () => {
         if (
@@ -303,8 +309,8 @@ export default createComponent({
           // but keep the total control size the same
           // Firefox rulez #14263, #14344
           $q.platform.is.firefox !== true && (inp.style.overflow = 'hidden')
-          inp.style.height = '1px'
           parentStyle.marginBottom = (inp.scrollHeight - 1) + 'px'
+          inp.style.height = '1px'
 
           inp.style.height = inp.scrollHeight + 'px'
           inp.style.overflow = overflow

package/src/components/input/QInput.json

@@ -118,6 +118,7 @@
       "desc": "DEPRECATED; Access 'nativeEl' directly instead; Get the native input/textarea DOM Element",
       "returns": {
         "type": "Element",
+        "tsType": "QInputNativeElement",
         "desc": "The underlying native input/textarea DOM Element"
       }
     }
@@ -126,6 +127,7 @@
   "computedProps": {
     "nativeEl": {
       "type": "Element",
+      "tsType": "QInputNativeElement",
       "desc": "The native input/textarea DOM Element",
       "addedIn": "v2.10.1"
     }

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

@@ -420,6 +420,8 @@ export default function (props, emit, emitValue, inputRef) {
   }
 
   function onMaskedKeydown (e) {
+    emit('keydown', e)
+
     if (shouldIgnoreKey(e) === true) {
       return
     }

package/src/components/item/QList.js

@@ -34,6 +34,6 @@ export default createComponent({
       + (props.padding === true ? ' q-list--padding' : '')
     )
 
-    return () => h(props.tag, { class: classes.value, role: 'list' }, hSlot(slots.default))
+    return () => h(props.tag, { class: classes.value }, hSlot(slots.default))
   }
 })

package/src/components/knob/QKnob.sass

@@ -18,4 +18,7 @@
       transition: box-shadow .24s ease-in-out
 
     &:focus:before
-      box-shadow: $shadow-4
+      box-shadow: $shadow-2
+
+body.body--dark .q-knob--editable:focus:before
+  box-shadow: $dark-shadow-2

package/src/components/layout/QLayout.sass

@@ -172,6 +172,8 @@ body:not(.q-body--layout-animate)
 body.body--dark
   .q-header, .q-footer, .q-drawer
     border-color: $separator-dark-color
+  .q-layout__shadow:after
+    box-shadow: $layout-shadow-dark
 
 body.platform-ios
   .q-layout--containerized