[v1] Quasar v1.0.0-beta.12/13 released! Don't miss it.

rstoenescu

Update: [v1] Released Quasar v1.0.0-beta.13 – with small regression fix on QInput in beta.12

Biggest news: you can now use images (svg, png, jpg, …) as icons too! Check out the QIcon documentation page to see how to use it. Works on any Quasar component with icon-related props!

Thanks to @webstudio (one of our Patrons) who requested and sponsored us for bringing QCarousel fullscreen mode faster.

New

feat(QIcon): Image icons support (including SVG) #2494
feat(QCarousel): fullscreen mode
feat(QInput/QSelect): [v1 request] bring back clearable prop for QInput/QSelect #3503
feat(quasar): Add onDismiss handler for QBottomSheet and QDialogPlugin, fix double cancel call (#3631)
feat(QFabActions): new props - “to” and “replace”
feat(QRating): new prop (“no-reset”), doc examples with image icons
feat(quasar): Improve QSelect menu and filter abort handling (#3648)
feat(quasar): Improve transitions - using easeOutCubic
feat(quasar): Add separator slot in QSplitter (#3654)
feat(quasar): QField - add custom control slot, unify focus/blur and add checks (#3653)

Fixes

fix(quasar): Adjustments for QSlider and QRange pin label background (#3612)
fix(lang): Applied some corrections to the dutch translation. (#3616)
fix(QInput/QSelect): [v1 bug] Placeholder shows up only on focus when using input with stack-label, should be always visible #3614
fix(quasar): Guard VTouch… for missing ctx.event (#3619)
fix(quasar): Stop propagation of touchstart on local menu in QSelect (#3618)
fix(quasar): Fix QSelect corner case when value is null, map-options is set and there is an option with value null (#3617)
fix(quasar): Prevent text selection on dbl click on QToggle’s knob (#3628)
fix(api): Fix “bottom center” should be “bottom middle” (#3633)
fix(api): QMenu/QTooltip anchor/self prop values #3633
fix(api): QTooltip “self” description
fix(quasar): [v1] QDate - years gets fighting for a place when $flex-cols is custom (#3629)
fix(QItem): [v1] QItem: Maximum call stack size exceeded error when enabling a component #3639
fix(iconSet): themify italic icon name
enhancement(QExpansionItem): Remove default overflow-hidden
fix(QDate): default view with null model in Persian calendar (#3649)
fix(quasar): Redo the selection logic for QRouteTab (#3642)
fix(QTree): A QTree’s node children aren’t observable when using lazy loading #3650
fix(quasar): Check if event is cancelable before preventDefault (#3651)

Hawkeye64

These are great updates!

mesqueeb

They’re m-m-m-monster kill!

amer1616

Awesome… images as icons really cool feature!! great as usual
One suggestion regarding QInput & QSelect. I hope to extract the autocomplete feature out to be independent plugin. so it can be used for both QInput or QSelect

rstoenescu

@amer1616 That would be duplicating the Autocomplete feature. QSelect can handle your case as if it’s a QInput. Check docs

amer1616

@rstoenescu Thank u. I’ve already used it for that but it needs some workarounds. By the way, have u noticed that if use img svg in QIcon, the color prop not working anymore. u have to style svg either in svg file or in css?!!

rstoenescu

@amer1616 If you feel you need to use workarounds, it means u haven’t fully grasped it yet. It’s natural that the color prop for QIcon with svg doesn’t works. You’re displaying an image, not a webfont, and Quasar can’t tamper with the image

smakinson

Nice, SVGeeee!

smakinson

In going back to use the clearable prop instead of:

<template v-slot:append>
   <q-icon v-if="searchTerms === ''" name="search" />
   <q-icon v-else name="clear" class="cursor-pointer" @click="searchTerms = ''" />
</template>

The search icon gets removed if I leave just that portion in combination with the clearable prop, I wondered if perhaps the clearable prop might also work as a string for an icon to use when cleared or a boolean if no icon. Thoughts?

lucasfernog

@smakinson I guess you can bind clearable prop using :clearable="searchTerms !== ''" and still use the append slot (however i don’t know why your code is not working, maybe post a codepen)

smakinson

@lucasfernog Sure, here is a codepen: https://codepen.io/smakinson/pen/EMJYEQ

lucasfernog

@smakinson When the clear button is pressed, the model value is updated to null, so your v-if on search icon is incorrect, it should be v-if="!searchTerm" for example

metalsadman

how to upgrade to this? when i issue quasar upgrade --install my version still says Pkg quasar........ v1.0.0-beta.9 & Pkg @quasar/app... v1.0.0-beta.10. thx

mesqueeb

On npm I think it’s npm update

smakinson

@lucasfernog Ah, ya missed that bit, so I guess that will be the best way to go moving forward. Thanks for catching that.

amer1616

@metalsadman really I tried many times to upgrade quasar package withquasar upgrade --install . but nothing changed. so I do it either by yarn upgrade or npm update

rstoenescu

@amer1616

Are you running @quasar/cli v1.0.0-beta.3 (the global installation)
Are you getting any errors when running “quasar upgrade”? What’s the output in your terminal?
What OS are you using?

“quasar upgrade -i” simply runs the yarn install / npm install command with the latest Quasar package versions available. How could it not change anything in your project folder?

amer1616

@rstoenescu yes im running the latest quasar-cli 3 globally. Actually there is no error i see. Only I get info that all quasar package is up-to-date. There is no yarn process executed at that time. Im running Windows 10 with the latest yarn & npm. I didnt change anything in project folder.

rstoenescu

@amer1616 Copy paste the terminal output of “quasar upgrade -i” here, and also your package.json.

rstoenescu

Also, copy paste the output of “quasar info”.

No More Posting New Topics!

[v1] Quasar v1.0.0-beta.12/13 released! Don't miss it.

New

Fixes