quasar 2.3.1 → 2.4.0

package/icon-set/svg-ionicons-v6.js

@@ -0,0 +1,225 @@
+
+import {
+  ionCheckmark,
+  ionAlert,
+  ionInformationCircleOutline,
+  ionArrowUp,
+  ionArrowForward,
+  ionArrowDown,
+  ionArrowBack,
+  ionCaretDownOutline,
+  ionAperture,
+  ionOptions,
+  ionApps,
+  ionRefresh,
+  ionSquare,
+  ionCloseCircle,
+  ionTime,
+  ionCalendar,
+  ionLink,
+  ionExpand,
+  ionChatboxEllipses,
+  ionPrint,
+  ionArrowUndo,
+  ionArrowRedo,
+  ionCodeSlash,
+  ionAdd,
+  ionClose,
+  ionPlaySkipBackCircle,
+  ionPlaySkipForwardCircle,
+  ionStar,
+  ionCreate,
+  ionWarning,
+  ionPlay,
+  ionAddCircle,
+  ionCloudUpload,
+  ionTrash,
+  ionCheckmarkDone,
+  ionChevronDown,
+  ionChevronUp,
+  ionChevronBack,
+  ionChevronForward,
+  ionChevronBackCircle,
+  ionChevronForwardCircle
+} from '@quasar/extras/ionicons-v6'
+
+// there are some icons that are needed but not available
+// so we import them from MDI as svgs
+
+import {
+  mdiFormatBold,
+  mdiFormatItalic,
+  mdiFormatStrikethroughVariant,
+  mdiFormatUnderline,
+  mdiFormatListBulleted,
+  mdiFormatListNumbered,
+  mdiFormatSubscript,
+  mdiFormatSuperscript,
+  mdiFormatAlignLeft,
+  mdiFormatAlignCenter,
+  mdiFormatAlignRight,
+  mdiFormatAlignJustify,
+  mdiFormatIndentDecrease,
+  mdiFormatIndentIncrease,
+  mdiFormatClear,
+  mdiFormatColorText,
+  mdiFormatSize,
+  mdiMinus,
+  mdiFormatHeader1,
+  mdiFormatHeader2,
+  mdiFormatHeader3,
+  mdiFormatHeader4,
+  mdiFormatHeader5,
+  mdiFormatHeader6,
+  mdiNumeric1Box,
+  mdiNumeric2Box,
+  mdiNumeric3Box,
+  mdiNumeric4Box,
+  mdiNumeric5Box,
+  mdiNumeric6Box,
+  mdiNumeric7Box,
+  mdiFormatFont
+} from '@quasar/extras/mdi-v6'
+
+export default {
+  name: 'svg-ionicons-v6',
+  type: {
+    positive: ionCheckmark,
+    negative: ionAlert,
+    info: ionInformationCircleOutline,
+    warning: ionAlert
+  },
+  arrow: {
+    up: ionArrowUp,
+    right: ionArrowForward,
+    down: ionArrowDown,
+    left: ionArrowBack,
+    dropdown: ionCaretDownOutline
+  },
+  chevron: {
+    left: ionArrowBack,
+    right: ionArrowForward
+  },
+  colorPicker: {
+    spectrum: ionAperture,
+    tune: ionOptions,
+    palette: ionApps
+  },
+  pullToRefresh: {
+    icon: ionRefresh
+  },
+  carousel: {
+    left: ionChevronBack,
+    right: ionChevronForward,
+    up: ionChevronUp,
+    down: ionChevronDown,
+    navigationIcon: ionSquare
+  },
+  chip: {
+    remove: ionCloseCircle,
+    selected: ionCheckmark
+  },
+  datetime: {
+    arrowLeft: ionChevronBack,
+    arrowRight: ionChevronForward,
+    now: ionTime,
+    today: ionCalendar
+  },
+  editor: { // requires Material icons for some as Ionicons simply does not have everything needed
+    hyperlink: ionLink,
+    toggleFullscreen: ionExpand,
+    quote: ionChatboxEllipses,
+    print: ionPrint,
+    undo: ionArrowUndo,
+    redo: ionArrowRedo,
+    code: ionCodeSlash,
+    viewSource: ionCodeSlash,
+
+    bold: mdiFormatBold,
+    italic: mdiFormatItalic,
+    strikethrough: mdiFormatStrikethroughVariant,
+    underline: mdiFormatUnderline,
+    unorderedList: mdiFormatListBulleted,
+    orderedList: mdiFormatListNumbered,
+    subscript: mdiFormatSubscript,
+    superscript: mdiFormatSuperscript,
+    left: mdiFormatAlignLeft,
+    center: mdiFormatAlignCenter,
+    right: mdiFormatAlignRight,
+    justify: mdiFormatAlignJustify,
+    outdent: mdiFormatIndentDecrease,
+    indent: mdiFormatIndentIncrease,
+    removeFormat: mdiFormatClear,
+    formatting: mdiFormatColorText,
+    fontSize: mdiFormatSize,
+    align: mdiFormatAlignLeft,
+    hr: mdiMinus,
+    heading: mdiFormatSize,
+    heading1: mdiFormatHeader1,
+    heading2: mdiFormatHeader2,
+    heading3: mdiFormatHeader3,
+    heading4: mdiFormatHeader4,
+    heading5: mdiFormatHeader5,
+    heading6: mdiFormatHeader6,
+    size: mdiFormatSize,
+    size1: mdiNumeric1Box,
+    size2: mdiNumeric2Box,
+    size3: mdiNumeric3Box,
+    size4: mdiNumeric4Box,
+    size5: mdiNumeric5Box,
+    size6: mdiNumeric6Box,
+    size7: mdiNumeric7Box,
+    font: mdiFormatFont
+  },
+  expansionItem: {
+    icon: ionCaretDownOutline,
+    denseIcon: ionCaretDownOutline
+  },
+  fab: {
+    icon: ionAdd,
+    activeIcon: ionClose
+  },
+  field: {
+    clear: ionCloseCircle,
+    error: ionAlert
+  },
+  pagination: {
+    first: ionPlaySkipBackCircle,
+    prev: ionChevronBackCircle,
+    next: ionChevronForwardCircle,
+    last: ionPlaySkipForwardCircle
+  },
+  rating: {
+    icon: ionStar
+  },
+  stepper: {
+    done: ionCheckmark,
+    active: ionCreate,
+    error: ionWarning
+  },
+  tabs: {
+    left: ionChevronBack,
+    right: ionChevronForward,
+    up: ionChevronUp,
+    down: ionChevronDown
+  },
+  table: {
+    arrowUp: ionArrowUp,
+    warning: ionWarning,
+    firstPage: ionPlaySkipBackCircle,
+    prevPage: ionChevronBackCircle,
+    nextPage: ionChevronForwardCircle,
+    lastPage: ionPlaySkipForwardCircle
+  },
+  tree: {
+    icon: ionPlay
+  },
+  uploader: {
+    done: ionCheckmark,
+    clear: ionClose,
+    add: ionAddCircle,
+    upload: ionCloudUpload,
+    removeQueue: ionTrash,
+    removeUploaded: ionCheckmarkDone
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.3.1",
+  "version": "2.4.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",
@@ -63,7 +63,7 @@
   "devDependencies": {
     "@babel/eslint-parser": "^7.13.14",
     "@quasar/app": "^3.0.0",
-    "@quasar/extras": "^1.11.0",
+    "@quasar/extras": "^1.12.0",
     "@rollup/plugin-node-resolve": "^11.2.1",
     "@rollup/plugin-replace": "^2.3.3",
     "babel-preset-es2015-rollup": "^3.0.0",

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 [