quasar 2.3.4 → 2.4.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.3.4",
+  "version": "2.4.3",
   "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",

package/src/api.extends.json

@@ -52,7 +52,7 @@
         "map",
         "ion-add",
         "img:https://cdn.quasar.dev/logo-v2/svg/logo.svg",
-        "img:statics/path/to/some_image.png"
+        "img:path/to/some_image.png"
       ],
       "category": "content"
     },
@@ -110,7 +110,6 @@
 
     "html": {
       "type": "Boolean",
-      "default": "false",
       "desc": "Force use of textContent instead of innerHTML to render text; Use it when the text might be unsafe (from user input)",
       "category": "behavior"
     },

package/src/components/breadcrumbs/QBreadcrumbs.js

@@ -6,6 +6,8 @@ import { createComponent } from '../../utils/private/create.js'
 import { hSlot } from '../../utils/private/render.js'
 import { getNormalizedVNodes } from '../../utils/private/vm.js'
 
+const disabledValues = [ void 0, true ]
+
 export default createComponent({
   name: 'QBreadcrumbs',
 
@@ -59,12 +61,15 @@ export default createComponent({
       vnodes.forEach(comp => {
         if (comp.type !== void 0 && comp.type.name === 'QBreadcrumbsEl') {
           const middle = els < len
+          const disabled = comp.props !== null && disabledValues.includes(comp.props.disable)
+          const cls = (middle === true ? ' q-breadcrumbs--last' : '')
+            + (disabled !== true && middle === true ? ' ' + activeClass.value : '')
+
           els++
 
           child.push(
             h('div', {
-              class: 'flex items-center '
-                + (middle === true ? activeClass.value : 'q-breadcrumbs--last')
+              class: `flex items-center${ cls }`
             }, [ comp ])
           )
 

package/src/components/breadcrumbs/QBreadcrumbs.sass

@@ -9,8 +9,5 @@
     &--with-label
       margin-right: 8px
 
-  &--last a
-    pointer-events: none
-
 [dir=rtl] .q-breadcrumbs__separator .q-icon
   transform: scaleX(-1) #{"/* rtl:ignore */"}

package/src/components/breadcrumbs/QBreadcrumbsEl.js

@@ -22,12 +22,17 @@ export default createComponent({
   },
 
   setup (props, { slots }) {
-    const { linkTag, linkProps, hasLink, navigateToLink } = useRouterLink()
+    const { linkTag, linkProps, hasRouterLink, navigateToRouterLink } = useRouterLink()
 
     const data = computed(() => {
-      const acc = { ...linkProps.value }
-      if (hasLink.value === true) {
-        acc.onClick = navigateToLink
+      const acc = {
+        class: 'q-breadcrumbs__el q-link '
+          + 'flex inline items-center relative-position '
+          + (props.disable !== true ? 'q-link--focusable' : 'q-breadcrumbs__el--disable'),
+        ...linkProps.value
+      }
+      if (hasRouterLink.value === true) {
+        acc.onClick = navigateToRouterLink
       }
       return acc
     })
@@ -49,10 +54,11 @@ export default createComponent({
 
       props.label !== void 0 && child.push(props.label)
 
-      return h(linkTag.value, {
-        class: 'q-breadcrumbs__el q-link flex inline items-center relative-position',
-        ...data.value
-      }, hMergeSlot(slots.default, child))
+      return h(
+        linkTag.value,
+        { ...data.value },
+        hMergeSlot(slots.default, child)
+      )
     }
   }
 })

package/src/components/btn/QBtn.js

@@ -37,7 +37,7 @@ export default createComponent({
     const {
       classes, style, innerClasses,
       attributes,
-      hasLink, isLink, navigateToLink,
+      hasRouterLink, hasLink, linkTag, navigateToRouterLink,
       isActionable
     } = useBtn(props)
 
@@ -54,7 +54,7 @@ export default createComponent({
       props.disable === true || props.ripple === false
         ? false
         : {
-            keyCodes: isLink.value === true ? [ 13, 32 ] : [ 13 ],
+            keyCodes: hasLink.value === true ? [ 13, 32 ] : [ 13 ],
             ...(props.ripple === true ? {} : props.ripple)
           }
     ))
@@ -135,10 +135,10 @@ export default createComponent({
         }
       }
 
-      if (hasLink.value === true) {
+      if (hasRouterLink.value === true) {
         const go = () => {
           e.__qNavigate = true
-          navigateToLink(e)
+          navigateToRouterLink(e)
         }
 
         emit('click', e, go)
@@ -360,7 +360,7 @@ export default createComponent({
 
       return withDirectives(
         h(
-          isLink.value === true ? 'a' : 'button',
+          linkTag.value,
           nodeProps.value,
           child
         ),

package/src/components/btn/use-btn.js

@@ -21,6 +21,9 @@ const defaultSizes = {
   xl: 24
 }
 
+const formTypes = [ 'button', 'submit', 'reset' ]
+const mediaTypeRE = /[^\s]\/[^\s]/
+
 export const useBtnProps = {
   ...useSizeProps,
   ...useRouterLinkProps,
@@ -76,7 +79,7 @@ export const useBtnProps = {
 export default function (props) {
   const sizeStyle = useSize(props, defaultSizes)
   const alignClass = useAlign(props)
-  const { hasLink, linkProps, navigateToLink } = useRouterLink()
+  const { hasRouterLink, hasLink, linkTag, linkProps, navigateToRouterLink } = useRouterLink('button')
 
   const style = computed(() => {
     const obj = props.fab === false && props.fabMini === false
@@ -107,10 +110,6 @@ export default function (props) {
     isActionable.value === true ? props.tabindex || 0 : -1
   ))
 
-  const isLink = computed(() =>
-    props.type === 'a' || hasLink.value === true
-  )
-
   const design = computed(() => {
     if (props.flat === true) return 'flat'
     if (props.outline === true) return 'outline'
@@ -122,19 +121,24 @@ export default function (props) {
   const attributes = computed(() => {
     const acc = { tabindex: tabIndex.value }
 
-    // if it's not rendered with "<a>" tag
-    // OR it's "<a>" but type is not "button"
-    // (<a> with type="button" is invalid HTML)
-    if (props.type !== 'a' && (props.type !== 'button' || hasLink.value !== true)) {
+    if (hasLink.value === true) {
+      Object.assign(acc, linkProps.value)
+    }
+    else if (formTypes.includes(props.type) === true) {
       acc.type = props.type
     }
 
-    if (hasLink.value === true) {
-      Object.assign(acc, linkProps.value)
-      acc.role = 'link'
+    if (linkTag.value === 'a') {
+      if (acc.href === void 0) {
+        acc.role = 'button'
+      }
+      if (hasRouterLink.value !== true && mediaTypeRE.test(props.type) === true) {
+        acc.type = props.type
+      }
     }
-    else {
-      acc.role = props.type === 'a' ? 'link' : 'button'
+    else if (props.disable === true) {
+      acc.disabled = ''
+      acc[ 'aria-disabled' ] = 'true'
     }
 
     if (props.loading === true && props.percentage !== void 0) {
@@ -146,11 +150,6 @@ export default function (props) {
       })
     }
 
-    if (props.disable === true) {
-      acc.disabled = ''
-      acc[ 'aria-disabled' ] = 'true'
-    }
-
     return acc
   })
 
@@ -191,9 +190,10 @@ export default function (props) {
     style,
     innerClasses,
     attributes,
+    hasRouterLink,
     hasLink,
-    isLink,
-    navigateToLink,
+    linkTag,
+    navigateToRouterLink,
     isActionable
   }
 }

package/src/components/btn/use-btn.json

@@ -4,37 +4,46 @@
   "props": {
     "type":{
       "type": "String",
-      "desc": "Define the button HTML DOM type",
+      "desc": "1) Define the button native type attribute (submit, reset, button) or 2) render component with <a> tag so you can access events even if disable or 3) Use 'href' prop and specify 'type' as a media tag",
       "default": "button",
-      "values": [
-        "a", "submit", "button", "reset"
-      ],
       "examples": [
-        "type=\"a\" href=\"http://some-site.net\" target=\"__blank\""
+        "a", "submit", "button", "reset",
+        "image/png",
+        "href=\"https://quasar.dev\" target=\"_blank\""
       ],
       "category": "general"
     },
 
     "to": {
       "type": [ "String", "Object" ],
-      "desc": "Equivalent to Vue Router <router-link> 'to' property",
+      "desc": "Equivalent to Vue Router <router-link> 'to' property; Superseeded by 'href' prop if used",
       "examples": [
         "/home/dashboard",
         ":to=\"{ name: 'my-route-name' }\""
       ],
-      "category": "router"
+      "category": "navigation"
     },
 
     "replace": {
       "type": "Boolean",
-      "desc": "Equivalent to Vue Router <router-link> 'replace' property",
-      "category": "router"
+      "desc": "Equivalent to Vue Router <router-link> 'replace' property; Superseeded by 'href' prop if used",
+      "category": "navigation"
     },
 
-    "append": {
-      "type": "Boolean",
-      "desc": "Equivalent to Vue Router <router-link> 'append' property",
-      "category": "router"
+    "href": {
+      "type": "String",
+      "desc": "Native <a> link href attribute; Has priority over the 'to' and 'replace' props",
+      "examples": [ "http://quasar.dev", "href=\"https://quasar.dev\" target=\"_blank\"" ],
+      "category": "navigation",
+      "addedIn": "v2.4"
+    },
+
+    "target": {
+      "type": "String",
+      "desc": "Native <a> link target attribute; Use it only with 'to' or 'href' props",
+      "examples": [ "_blank", "_self", "_parent", "_top" ],
+      "category": "navigation",
+      "addedIn": "v2.4"
     },
 
     "label":{

package/src/components/btn-toggle/QBtnToggle.json

@@ -189,6 +189,9 @@
   "slots": {
     "default": {
       "desc": "Suggestions: QTooltip, QBadge"
+    },
+    "...": {
+      "desc": "Any other dynamic slots to be used with 'slot' property of the 'options' prop"
     }
   }
 }

package/src/components/checkbox/use-checkbox.js

@@ -107,7 +107,7 @@ export default function (type, getInner) {
     const prop = { type: 'checkbox' }
 
     props.name !== void 0 && Object.assign(prop, {
-      checked: isTrue.value,
+      '^checked': isTrue.value === true ? 'checked' : void 0,
       name: props.name,
       value: modelIsArray.value === true
         ? props.val

package/src/components/color/QColor.js

@@ -35,6 +35,7 @@ const palette = [
 ]
 
 const thumbPath = 'M5 5 h10 v10 h-10 v-10 z'
+const alphaTrackImg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAH0lEQVQoU2NkYGAwZkAFZ5G5jPRRgOYEVDeB3EBjBQBOZwTVugIGyAAAAABJRU5ErkJggg=='
 
 export default createComponent({
   name: 'QColor',
@@ -653,37 +654,42 @@ export default createComponent({
       ]
 
       const sliders = [
-        h('div', { class: 'q-color-picker__hue non-selectable' }, [
-          h(QSlider, {
-            modelValue: model.value.h,
-            min: 0,
-            max: 360,
-            fillHandleAlways: true,
-            readonly: editable.value !== true,
-            thumbPath,
-            'onUpdate:modelValue': onHueChange,
-            ...getCache('lazyhue', {
-              onChange: val => onHueChange(val, true)
-            })
+        h(QSlider, {
+          class: 'q-color-picker__hue non-selectable',
+          modelValue: model.value.h,
+          min: 0,
+          max: 360,
+          trackSize: '8px',
+          innerTrackColor: 'transparent',
+          selectionColor: 'transparent',
+          readonly: editable.value !== true,
+          thumbPath,
+          'onUpdate:modelValue': onHueChange,
+          ...getCache('lazyhue', {
+            onChange: val => onHueChange(val, true)
           })
-        ])
+        })
       ]
 
       hasAlpha.value === true && sliders.push(
-        h('div', { class: 'q-color-picker__alpha non-selectable' }, [
-          h(QSlider, {
-            modelValue: model.value.a,
-            min: 0,
-            max: 100,
-            fillHandleAlways: true,
-            readonly: editable.value !== true,
-            thumbPath,
-            ...getCache('alphaSlide', {
-              'onUpdate:modelValue': value => onNumericChange(value, 'a', 100),
-              onChange: value => onNumericChange(value, 'a', 100, void 0, true)
-            })
+        h(QSlider, {
+          class: 'q-color-picker__alpha non-selectable',
+          modelValue: model.value.a,
+          min: 0,
+          max: 100,
+          trackSize: '8px',
+          trackColor: 'white',
+          innerTrackColor: 'transparent',
+          selectionColor: 'transparent',
+          trackImg: alphaTrackImg,
+          readonly: editable.value !== true,
+          hideSelection: true,
+          thumbPath,
+          ...getCache('alphaSlide', {
+            'onUpdate:modelValue': value => onNumericChange(value, 'a', 100),
+            onChange: value => onNumericChange(value, 'a', 100, void 0, true)
           })
-        ])
+        })
       )
 
       return [

package/src/components/color/QColor.sass

@@ -97,47 +97,34 @@
     border-radius: 50%
     transform: translate(-5px, -5px)
 
-  &__hue .q-slider__track-container
+  &__hue .q-slider__track
     background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%) !important // @stylint ignore
     opacity: 1
 
-  &__alpha .q-slider__track-container
-    color: #fff
-    opacity: 1
-    height: 8px
-    background-color: #fff !important
-    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAH0lEQVQoU2NkYGAwZkAFZ5G5jPRRgOYEVDeB3EBjBQBOZwTVugIGyAAAAABJRU5ErkJggg==') !important
-    &:after
+  &__alpha
+    .q-slider__track-container
+      padding-top: 0
+    .q-slider__track:before
       content: ''
       position: absolute
       top: 0
       right: 0
       bottom: 0
       left: 0
+      border-radius: inherit
       background: linear-gradient(90deg, rgba(255,255,255,0), $grey-7)
 
   &__sliders
-    padding: 4px 16px 16px
-
-    .q-slider__track-container
-      height: 10px
-      margin-top: -5px
-
-    .q-slider__track
-      display: none
+    padding: 0 16px
 
     .q-slider__thumb
+      color: $grey-9
       path
         stroke-width: 2px
         fill: transparent
     .q-slider--active path
       stroke-width: 3px
 
-    .q-slider
-      height: 16px
-      margin-top: 8px
-      color: $grey-9
-
   /* Tune Tab */
 
   &__tune-tab
@@ -188,5 +175,5 @@
     .q-color-picker__tune-tab input
       border: 1px solid rgba(#fff, .3)
 
-    .q-slider
-      color: $grey-5
+    .q-slider__thumb
+      color: $grey-1

package/src/components/date/QDate.sass

@@ -95,6 +95,8 @@
     > div
       line-height: 30px
       text-align: center
+    > button
+      line-height: 22px
 
     &--out
       opacity: .18

package/src/components/dialog/QDialog.js

@@ -94,7 +94,7 @@ export default createComponent({
 
     const { preventBodyScroll } = usePreventScroll()
     const { registerTimeout, removeTimeout } = useTimeout()
-    const { registerTick, removeTick, prepareTick } = useTick()
+    const { registerTick, removeTick } = useTick()
 
     const { showPortal, hidePortal, portalIsActive, renderPortal } = usePortal(
       vm, innerRef, renderPortalContent, /* pls do check if on a global dialog */ true
@@ -193,7 +193,6 @@ export default createComponent({
       if (props.noFocus !== true) {
         document.activeElement !== null && document.activeElement.blur()
         registerTick(focus)
-        prepareTick()
       }
 
       registerTimeout(() => {
@@ -239,6 +238,7 @@ export default createComponent({
 
       if (refocusTarget !== null) {
         refocusTarget.focus()
+        refocusTarget = null
       }
 
       registerTimeout(() => {
@@ -306,6 +306,10 @@ export default createComponent({
           removeEscapeKey(onEscapeKey)
         }
       }
+
+      if (hiding !== true) {
+        refocusTarget = null
+      }
     }
 
     function updateMaximized (active) {
@@ -364,9 +368,7 @@ export default createComponent({
       }
     })
 
-    onBeforeUnmount(() => {
-      cleanup()
-    })
+    onBeforeUnmount(cleanup)
 
     function renderPortalContent () {
       return h('div', {

package/src/components/drawer/QDrawer.js

@@ -330,6 +330,13 @@ export default createComponent({
       ] ]
     })
 
+    function updateBelowBreakpoint () {
+      updateLocal(belowBreakpoint, (
+        props.behavior === 'mobile'
+        || (props.behavior !== 'desktop' && $layout.totalWidth.value <= props.breakpoint)
+      ))
+    }
+
     watch(belowBreakpoint, val => {
       if (val === true) { // from lg to xs
         lastDesktopState = showing.value
@@ -351,13 +358,6 @@ export default createComponent({
       }
     })
 
-    watch($layout.totalWidth, val => {
-      updateLocal(belowBreakpoint, (
-        props.behavior === 'mobile'
-        || (props.behavior !== 'desktop' && val <= props.breakpoint)
-      ))
-    })
-
     watch(() => props.side, (newSide, oldSide) => {
       if ($layout.instances[ oldSide ] === instance) {
         $layout.instances[ oldSide ] = void 0
@@ -371,10 +371,20 @@ export default createComponent({
       $layout[ newSide ].offset = offset.value
     })
 
-    watch(() => props.behavior + props.breakpoint, updateBelowBreakpoint)
+    watch($layout.totalWidth, () => {
+      if ($layout.isContainer.value === true || document.qScrollPrevented !== true) {
+        updateBelowBreakpoint()
+      }
+    })
+
+    watch(
+      () => props.behavior + props.breakpoint,
+      updateBelowBreakpoint
+    )
 
     watch($layout.isContainer, val => {
       showing.value === true && preventBodyScroll(val !== true)
+      val === true && updateBelowBreakpoint()
     })
 
     watch($layout.scrollbarWidth, () => {
@@ -430,13 +440,6 @@ export default createComponent({
       }
     }
 
-    function updateBelowBreakpoint () {
-      updateLocal(belowBreakpoint, (
-        props.behavior === 'mobile'
-        || (props.behavior !== 'desktop' && $layout.totalWidth.value <= props.breakpoint)
-      ))
-    }
-
     function applyBackdrop (x) {
       flagBackdropBg.value = x
     }

package/src/components/editor/QEditor.js

@@ -502,7 +502,7 @@ export default createComponent({
       return h('div', {
         ref: rootRef,
         class: classes.value,
-        style: { height: inFullscreen.value === true ? '100vh' : null },
+        style: { height: inFullscreen.value === true ? '100%' : null },
         ...attributes.value,
         onFocusin,
         onFocusout

package/src/components/editor/QEditor.sass

@@ -6,7 +6,9 @@
   &.disabled
     border-style: dashed
 
-  > div:first-child, &__toolbars-container, &__toolbars-container > div:first-child
+  > div:first-child,
+  &__toolbars-container,
+  &__toolbars-container > div:first-child
     border-top-left-radius: inherit
     border-top-right-radius: inherit
 
@@ -17,14 +19,18 @@
     border-bottom-left-radius: inherit
     border-bottom-right-radius: inherit
     overflow: auto
+    max-width: 100%
+
     pre
       white-space: pre-wrap
+
     hr
       border: 0
       outline: 0
       margin: 1px
       height: 1px
       background: $editor-hr-color
+
     &:empty:not(:focus):before
       content: attr(placeholder)
       opacity: .7
@@ -33,6 +39,9 @@
     border-bottom: 1px solid $editor-border-color
     min-height: 32px
 
+  &__toolbars-container
+    max-width: 100%
+
   .q-btn
     margin: $editor-button-gutter
 

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

@@ -96,7 +96,10 @@ export default createComponent({
     })
 
     const hasLink = computed(() =>
-      props.disable !== true && props.to !== void 0 && props.to !== null && props.to !== ''
+      props.disable !== true && (
+        props.href !== void 0
+        || (props.to !== void 0 && props.to !== null && props.to !== '')
+      )
     )
 
     const linkProps = computed(() => {