quasar 2.3.2 → 2.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.3.2",
+  "version": "2.4.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",

package/src/api.extends.json

@@ -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)
@@ -277,6 +277,7 @@ export default createComponent({
     }
 
     function onLoadingEvt (evt) {
+      stopAndPrevent(evt)
       evt.qSkipRipple = true
     }
 
@@ -359,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 = [ '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-dropdown/QBtnDropdown.json

@@ -10,6 +10,7 @@
       "extends": "model-value",
       "type": "Boolean",
       "desc": "Controls Menu show/hidden state; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive",
+      "required": false,
       "examples": [ "v-model=\"menuState\"" ]
     },
 

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/chip/QChip.json

@@ -55,8 +55,7 @@
       "type": "Boolean",
       "desc": "Model of the component determining if QChip should be rendered or not",
       "required": false,
-      "default": true,
-      "category": "model"
+      "default": true
     },
 
     "selected": {

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.json

@@ -209,35 +209,42 @@
           "definition": {
             "year": {
               "type": "Number",
+              "required": true,
               "desc": "The year of the date that the user has clicked/tapped on",
               "__exemption": [ "examples" ]
             },
             "month": {
               "type": "Number",
+              "required": true,
               "desc": "The month of the date that the user has clicked/tapped on",
               "__exemption": [ "examples" ]
             },
             "day": {
               "type": "Number",
+              "required": true,
               "desc": "The day of the month that the user has clicked/tapped on",
               "__exemption": [ "examples" ]
             },
             "from": {
               "type": "Object",
+              "required": false,
               "desc": "Object of properties of the range starting point (only if range)",
               "definition": {
                 "year": {
                   "type": "Number",
+                  "required": true,
                   "desc": "The year",
                   "__exemption": [ "examples" ]
                 },
                 "month": {
                   "type": "Number",
+                  "required": true,
                   "desc": "The month",
                   "__exemption": [ "examples" ]
                 },
                 "day": {
                   "type": "Number",
+                  "required": true,
                   "desc": "The day of month",
                   "__exemption": [ "examples" ]
                 }
@@ -245,20 +252,24 @@
             },
             "to": {
               "type": "Object",
+              "required": false,
               "desc": "Object of properties of the range ending point (only if range)",
               "definition": {
                 "year": {
                   "type": "Number",
+                  "required": true,
                   "desc": "The year",
                   "__exemption": [ "examples" ]
                 },
                 "month": {
                   "type": "Number",
+                  "required": true,
                   "desc": "The month",
                   "__exemption": [ "examples" ]
                 },
                 "day": {
                   "type": "Number",
+                  "required": true,
                   "desc": "The day of month",
                   "__exemption": [ "examples" ]
                 }
@@ -278,11 +289,13 @@
           "definition": {
             "year": {
               "type": "Number",
+              "required": true,
               "desc": "The year",
               "__exemption": [ "examples" ]
             },
             "month": {
               "type": "Number",
+              "required": true,
               "desc": "The month",
               "__exemption": [ "examples" ]
             }
@@ -300,16 +313,19 @@
           "definition": {
             "year": {
               "type": "Number",
+              "required": true,
               "desc": "The year",
               "__exemption": [ "examples" ]
             },
             "month": {
               "type": "Number",
+              "required": true,
               "desc": "The month",
               "__exemption": [ "examples" ]
             },
             "day": {
               "type": "Number",
+              "required": true,
               "desc": "The day of month",
               "__exemption": [ "examples" ]
             }
@@ -327,20 +343,24 @@
           "definition": {
             "from": {
               "type": "Object",
+              "required": true,
               "desc": "Definition of date from where the range begins",
               "definition": {
                 "year": {
                   "type": "Number",
+                  "required": true,
                   "desc": "The year",
                   "__exemption": [ "examples" ]
                 },
                 "month": {
                   "type": "Number",
+                  "required": true,
                   "desc": "The month",
                   "__exemption": [ "examples" ]
                 },
                 "day": {
                   "type": "Number",
+                  "required": true,
                   "desc": "The day of month",
                   "__exemption": [ "examples" ]
                 }
@@ -348,20 +368,24 @@
             },
             "to": {
               "type": "Object",
+              "required": true,
               "desc": "Definition of date to where the range ends",
               "definition": {
                 "year": {
                   "type": "Number",
+                  "required": true,
                   "desc": "The year",
                   "__exemption": [ "examples" ]
                 },
                 "month": {
                   "type": "Number",
+                  "required": true,
                   "desc": "The month",
                   "__exemption": [ "examples" ]
                 },
                 "day": {
                   "type": "Number",
+                  "required": true,
                   "desc": "The day of month",
                   "__exemption": [ "examples" ]
                 }
@@ -383,8 +407,8 @@
       "params": {
         "view": {
           "type": "String",
-          "desc": "QDate view name",
           "required": true,
+          "desc": "QDate view name",
           "values": [ "Calendar", "Months", "Years" ]
         }
       }

package/src/components/date/QDate.sass

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