Quasar 0.17 - Features and Fixes
On July 25th, 2018 we released Quasar 0.17.0 - and since then there have been 12 patch releases. This article will tell you about the very few breaking changes from 0.16, and introduce some new and rather awesome features. The complete changelog is below.
Repo: https://github.com/quasarframework/quasar
Latest Release: v0.17.12
Support our push to v1.0 on Fundition
Cherry Picking some Highlights
- Finalized Vetur support – VSCode code autocompletion support through Vetur extension(will get enabled once Vetur makes a new release)
- French language pack - first day of week is Monday
- Containerized QLayout is out of the “experimental” stage and it’s ready for production usage
- [Feature Request] Object as filter in DataTable #1896
- QNoSsr component; highly optimized - takes into consideration client takeover so subsequent renders are as fast as possible.
- QJumbotron component
- QTable as grid
- New quasar.conf > framework >
config
Object
Breaking Changes
Only one, regarding QLayoutDrawer mini-width
prop. It is now a Number (instead of String!) defining width in pixels (default: 60).
Good to Know
A minor change that you should be aware of is that we are deprecating the special boot
app plugin, and it will be removed in the next version in favor of using the PreFetch Feature in src/App.vue
and calling redirect(false)
(in case you want to abort the initial app render). For the time being it is still available, but you should migrate as soon as possible. For Vuex users dealing with SSR and the snarky issues around passing login credentials, @kevinmarrec has a helpful reminder for you:
If you are dealing with Quasar SSR, or any other SSR supports to build Universal Vue.js Applications, and you are planning to use Vuex, you should already know that you need your
Store
declared as a function.
// src/store/index.js
export default function (/* { ssrContext } */) {
const Store = new Vuex.Store({...})
return Store
}
But you should be aware that you also need to export all your modules'
state
as function in appropriate files like :
// src/store/modules/example.js
export const state = () => ({
counter: 0
})
If you omit exporting them (states) as a function, your SSR server will always serve the same Store to every new Client app, and it will cause unexpected behaviours.
Example: If you are using an auth system which set the logged user in the Store, it will be stored there "forever" (or at least until you restart your server or you force somewhere to reset the Store state which should not be needed..) and every client a.k.a every end user will be automatically logged with the credentials which remained in the server's "unique" store state (unique because it is not exported as a function !)
Sources :
- https://quasar-framework.org/guide/ssr-writing-universal-code.html#Avoid-Stateful-Singletons
- https://nuxtjs.org/guide/vuex-store/#modules-mode
See also:
- https://ssr.vuejs.org/guide/structure.html#avoid-stateful-singletons
- https://github.com/nuxt/nuxt.js/issues/2508
Important New Features
SSR (Server-Side Rendering) Support
The long awaited SSR support is here! Quasar code is now isomorphic. It might be a one-liner, but this is where 90% of the development time was spent for this release. (0.17.0)
Some things worth mentioning, in order to best benefit from Quasar SSR:
- Make sure you read the SSR docs in Guide
- Use Platform and Cookies Quasar plugins only in their
$q.platform
and$q.cookies
form. Do not use this outside of Vue components when building with SSR mode. This restriction is required because of the singleton problem when dealing with SSR. - The LocalStorage and SessionStorage Quasar plugins cannot be used on server-side. The reasons are obvious since this is a client-side only browser API. DO NOT rely on web storage for your SSR website. You can use Cookies Quasar plugin instead, which does work on server-side too.
- Make your
QBtn
s SEO-friendly. Quasar offers this functionality out of the box, but you need to enable it:
(html comment removed: old way, still works, but not SEO friendly )
<q-btn @click="$router.push({ name: 'special' })" ... />
(html comment removed: new, equivalent way )
<q-btn :to="{ name: 'special' }" ... />
Quasar Meta plugin
The Meta plugin can change page title, manage meta tags, manage <html>
& <body>
DOM element attributes, add/remove/change <style>
tags in head (useful for CDN stylesheets, for example), or manage <noscript>
tags.
The "meta" properties can be dynamic. For example, this is how you can bind to the Vue scope with them. Think of them as a Vue computed property.
export default {
data () {
return {
title: 'Some title' // we define the "title" prop
}
},
meta () {
return {
// this accesses the "title" property in your Vue "data";
// whenever "title" prop changes, your meta will automatically update
title: this.title
}
},
methods: {
setAnotherTitle () {
this.title = 'Another title' // will automatically trigger a Meta update due to the binding
}
}
// ...
}
COMPLETE CHANGELOG
v0.17.12
New
- QDatetimePicker Mat - 24h on 2 circles (#2502)
Fixes
- QDatetime: CSS when on RTL for hour:minute banner on header
- QInput - wrong cursor on hover when using float-label #2488
- Change q-radial-ripple so that it plays nice with QTable (#2485) -- also solves vertical scroll present in IE
- QLayoutDrawer - respect model when not using
show-if-above
- QLayoutDrawer - fix preventScroll cleanup (#2500)
- QDatetimePicker Material: fix keyboard related and clock(hour) click (#2501)
v0.17.11
New/Improvements
- QLayoutDrawer: show-if-above Boolean prop
- QTabs: new prop underline-color
- Improved animation for horizontal QStepper
- QChipsInput & QSelect with QChips -- more compact design
- QTable: new prop binary-state-sort (sort will have 2 states -- ascending, descending -- instead of 3 -- ascending, descending, no sort)
- QTable: [Request] Ability to get rid completely of rows-per-page-options in QTable. #2429
- QDatetime - add animation for hour to minute change #2451
- QTree - Ability to specify a different label field than 'label' #2442
Fixes
- QSelect show undefined on clear #2479
- Form components: blur and emit on destroy if focused (#2486
- QInput with icon, visibility issue inside QInnerLoading #2484
- Model-Toggle components (QLayoutDrawer, QTooltip, QPopover, ...) - do not change model on destroy
- French language pack - first day of week is Monday
- Element in QModal doesn't scroll horizontally [#2450]https://github.com/quasarframework/quasar/issues/2450) + Account for horizontal scroll modifiers in preventScroll ([#2458]https://github.com/quasarframework/quasar/pull/2458&sa=D&ust=1535708450063000))
- QInput: fix scrollbar on textarea when rows prop generates a higher field than maxHeight #2462
- Remove duplicate [@show] and [@hide] emit in QPopover #2474
- Error using $q.screen.setSizes() #2469
v0.17.10
New
- Overall design refinements (focused on subtle design improvements)
- QPopupEdit component -- especially useful (but not limited to) for QTable
- Swipeable and animated QTab panes
- Ability to display HTML strings as labels in QSelect
- QDatetime new prop: header-label
- Containerized QLayout is out of the "experimental" stage and it's ready for production usage
- QInput new event: @paste (triggered when user pastes content)
- Improved QPopover & QTooltip animations
- QPopover new props: cover (covers parent) and persistent (doesn't gets closed if clicking outside of it)
Fixes
- QRating - multiline when it needs to (not enough space for a single line)
- QField content clipping
v0.17.9
New
- QParallax: Add support for videos
- (Experimental) Containerized QLayout; includes ability to use QLayout inside QModal; IE11 not supported (check Layout components page).
- Shake Modal/Dialog if not dismissable
- [Request] QCollapsible support for routes #937
- QSearch | Add type="search"? #2426
- QLayoutDrawer new event: 'on-layout(boolean)' -- triggered when Drawer toggles occupying space on Layout
- Updated src/css/core.variables.styl - making variables overridable #1912
- Remove Tooltip shadow for Material theme (to match Material guidelines)
- Feature Request: Ability to disable Hover on timeline component #2205
- QUpload "filter" property #1458
- [Feature Request] Object as filter in DataTable #1896
- [Request] QItem/QItemMain / Add stylus variable that controls the size of the offset the property 'inset' produces #2183
- [Enhancement] QTree: add an iconColor property on the Nodes model structure #2203
- [Request] Truncate text in QInput #2307
- [REQUEST] Adjustable Column Widths for QTables #2248
Fixes
- Problems with Min Max DateTime Picker #2362
- Wrong icon in fontawesome Quasar icon set #2431
- QAutocomplete bad popover positioning unless static data #2427
- Safe Area for iOS when QModal in 'maximized' #2421
- QTable - rows per page select font
- QFab closing animation
- Modal maximized leaves class q-maximized-modal on body element even after hidden #2417
v0.17.8
VSCode code autocompletion is coming! Will publish an article on our medium.com Quasar blog.
New
- Finalized Vetur support -- VSCode code autocompletion support through Vetur extension (will get enabled once Vetur makes a new release)
- $tooltip-fontsize Stylus variable
Fixes
- QSlideTransition not working correctly after fast toggling when using with v-if #2401
- Unable to use QScreen in computed properties due to it being an Object #2399
v0.17.7
When upgrading, please add responsive Boolean prop to QTimeline to maintain previous behaviour. We apologise for this change in a minor release but it is really needed.
New
- [Request] QTimeline always one-sided #2324
- [Request] QCarousel/QEditor/QTable emit event on fullscreen change #2338
- [Request] QCollapsible add style for open item #2375
- QTooltip - font-size should be 12px according to Material specs
- Do not add left/right padding to Tabs container when not on header/footer.
Fixes
- QSlideTransition sometimes doesn't play in Chrome/Firefox on desktop #2384
- Fontawesome icons don't fit timeline icons #2386
- QItem label letters being cut off
- Don't pad hideUnderlined controls #2388
- Clearable not working in ChipsInput #2383
- Some arabic i18n typos(#2380
- Unable to override color of QRouteTab #2394
v0.17.6
Features
- Various CSS fixes for IE11
- Greatly improve QSlideTransition performance (also affecting QCollapsible, QTree, QStepper)
v0.17.5
Features
- [Request] Allow shadow color and elevation to be overridable #2357
Fixes
- QAutocomplete: fix error with timing when typing immediately after focus #2361
- QChat: fix shrinked avatar with long text #2360
- QBtn: set type 'button' on buttons by default (else it's going to be 'submit') #2354
- Greek translation letter updated #2355
- Brazilian portuguese localization updates. #2351
- QInput textarea rows - fix css height(#2343
- IE11 various CSS fixes
v0.17.4
Fix: [Bug] - QScrollObservable - debounce not working with QSrollArea? #2341
v0.17.3
Fixes
- QScrollArea unable to select text inside #2197
- Pinch zoom event not available and q-context-menu identifies it as long press
- QAutocomplete: Small adjustments of timing for trigger on focus #2332
- Better handling of iPhoneX statusbar padding
v0.17.2
Fix
- outline and textarea height (#2328)
v0.17.1
Fix
- [Bug] .17 - Notify defaults #2322
v0.17.0
This is big release, introducing SSR support & many new features. Enjoy!
New
- QNoSsr component; highly optimized - takes into consideration client takeover so subsequent renders are as fast as possible.
- QJumbotron component
- QTable as grid
- New quasar.conf > framework >
config
Object - Loading & Notify Quasar plugins now support a new method:
setDefaults({...})
-- use this or through quasar.conf > framework > config:{ loading: {...}, notify: {...} }
- (NEW) LoadingBar Quasar plugin -- adds a loading bar a-la Youtube; no need to do anything else in your app code
- Hook AddressbarColor into cordova-plugin-statusbar when available
- QLayoutDrawer
- "mini-width" prop is now a Number (instead of String!) defining width in pixels (default: 60)
- new prop:
width
defining width in pixels for non-mini mode (default: 300) - backdrop animation when in mobile mode
- Many performance enhancements
- layout header/footer animation
- tweaks to make Vue render Quasar components faster by avoiding some children array normalization
- Ability to cancel frameDebounce() from utils (call
.cancel()
on the debounced function) - QUploader: added
upload-factory
prop (#2093) - QInput: added prop
lower-case
(#2117) - New Quasar language packs: Traditional Chinese, Guarani
- [Request] Q-Chips-Input: Pass upper-case parameter to underlying q-input #2031
- [Request] QUploader - new prop:
no-content-type
#1974 - Q-Page: ability to disable
minHeight
prop. (#2120) - Allow Dialog and ActionSheet Quasar plugins to receive a resolver token (#1869)
- Improve out of the box SEO for QItem, QBreadcrumbs, QRouteTab -- allow bots to follow links
- Improve keyboard navigation (#1936)
- QModal
- fix not emmiting dismiss on ESC
- focus after show
- add back noRefocus
- QPopover
- focus after show
- refocus after hide (noRefocus prop)
- allow toggle by keyboard ENTER
- QDialog
- fix button focus
- find button by class name (q-btn)
- add back noRefocus
- QFab - refocus after hide
- QTab / QRouteTab
- focus with keyboard
- allow select with keyboard ENTER
- QColor and QDatetime
- fix tabindex lost on close
- fix popup not closing on blur
- QColorPicker
- fix incorrect tabindex on disable
- allow to select saturation on click on mobile (was working only on drag)
- QDatetimePicker.mat - allow keyboard adjustment of all values
- QActionsheet
- select option with ENTER/SPACE, navigation with TAB
- trigger selection on keyup to avoid click on original button
- QAutocomplete - use QPopup with noFocus
- QKnob, QSlider, QRange - keyboard updating (UP|RIGHT +, DOWN|LEFT -, CTRL+... 10*)
- QSelect
- remove autofocusFilter - always select filter if present
- move keyboard navigation on QPopover
- delay popover.reposition on filter to allow resize
- v-back-to-top, v-close-overlay, v-go-back, v-ripple - trigger by keyboard ENTER
- QInput - set model on ENTER
- QModal
- Flex addons -- provide breakpoint aware versions for all flex (and display) related classes -- needs to be enabled from quasar.conf > framework > cssAddon: true
- QModal: Auto size based on content, can be customized through CSS with (min|max)(Width|Height) passed in :content-css. It's also applied when using QModalLayout.
- Flex: .col has higher grow priority than .col-auto and .col-grow, add .(col|offset)-0
- Material ripple - centered on round buttons (as per Material guidelines)
- [Request] debounce property in QScrollObservable component #2169
- QTabs - desktop state hover
- QScrollArea - added hover effect (#2189)
- Lots of enhancements to QAjaxBar to best accommodate SSR mode
- Use round/rounded focus helper for radio/checkbox (#2200)
- QBtnDropdown - popover-anchor & popover-self props (to align its popover) #1665
- Enhancements for clearable and clearValue (#2216) #1994
- Loading plugin default delay was set to 0
- feat: add v-scroll horizontal position #2296
- Finalized helper-json files
- Set xhr's withCredentials flag in request for QUploader #2305
- QTabs new prop: "panes-container-class"
Fixes
- QTab's count and alert attributes look bad when QTabs's align is set to justify #2032
- [Bug] QSelect throws an error when container block disappears #2071
- QInput shouldn't have expanding underline animation on focus in iOS theme #2085
- v-scroll-fire get fired when reload the page #2081
- Q-Pagination Direction-Links Broken on Cordova #2088
- v-model on QLayoutDrawer bug #2094 -- example: having an input component breaks the model of QLayoutDrawer
- iPhoneX - avoid toolbar/header top-padding when not in fullscreen #2118
- [Regression] Dialog is not blurring input element in v0.15.15/v0.16 #2137
- QBtnDropdown Popover does not scroll #2136
- QTable: [MS-Edge] Loading indicator not displayed correctly #2122
- QSearch: propagate upper-case and lower-case #2124
- Force QChip pointing zIndex (when in an already positioned context) #1982
- QPullToRefresh causing scroll issues with large tables inside QScrollArea #1884
- QColorPicker - process unset value #1887
- Error when navigating to other page while select component is opened #1980
- Return dismiss function from Notify.create #1913
- Fix material ripples on IE 11
- QAutocomplete: Fix focus after tab, fix loop in normalizeInterval, fix reposition, select options on keyboard navigation #2149 #2155 close #2157
- Override Material Icons CDN default size
- Colors utils: Fix guard for color type in luminosity(#2180
- Japanese Quasar language pack: 2 words changed for more natural Japanese #2182
- Mini layout drawer animates like normal mode when it hides automatically #2080
- Infinite scroll delay after resume #2187
- animScrollTo util - bug if duration < 16 after recursion (#2192)
- Fix dom.ready() util when readyState = "interactive" #2199
- QSelect: fix blur when selecting clear #2202
- QBreadcrumbs and align mixin - fix align prop value check #2217
- className for QSelect, QSearch before|after, QInput focus on marginalia #2215
- Screen plugin doesn't updates values after setting new sizes #2221
- QRouterTab: fix double tabindex and hide outline #2226
- QPopover: only refocus on anchorEl when anchorClick (solves refocusing on split dropdown) #2225
- Fix QAutocomplete when not editable and pass readonly to QInputFrame #2227
- Fix internal popups.getPosition corner-case #2235
- QDatetime: use a +-50 years interval from current, use precomputed mins #2234
- QDatetime: format when type is date and formatModel is string #2231
- Not caught rejected promises when showing/hiding modals, dialogs, popovers
- QTable - sort by non visible column #1886
- QInfiniteScroll concurrency issue #2241
- QSelect does not show placeholder text when using chips #2003) #2287
- Corner case in model-toggle where component gets destroyed & not cleans up history on Cordova
Did you really read this far? Excellent.
Maybe you want to find out more about Quasar, so please consider:
COMPONENTS: https://github.com/quasarframework/quasar
CLI: https://github.com/quasarframework/quasar-cli
THE DOCS: https://quasar-framework.org/
DISCORD: http://chat.quasar-framework.org/
FORUM: https://forum.quasar-framework.org/
This is a fantastic update. Extensive, eloquent, clear.
Could it use the odd comma where there was none? Sure. For example, "This article will tell you about the very few breaking changes from 0.16 and introduce a some new and rather awesome features" would have been better with a comma before "and."
However, even with such minor issues, this was a great read. I look forward to your next update!
Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.
To view those questions and the relevant answers related to your post, click here.
Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]
Thank you for your review, @didic!
So far this week you've reviewed 14 contributions. Keep up the good work!
Thanks for the feedback, glad you liked it. I fixed the comma (and the extra "a" betwixt introduce and some in the sentence you cited). :)
very nice post ,,,
Very detailed progress update. Good luck on reaching v1.0!
Hey, @quasarframework!
Thanks for contributing on Utopian.
Congratulations! Your contribution was Staff Picked to receive a maximum vote for the blog category on Utopian for being of significant value to the project and the open source community.
We’re already looking forward to your next contribution!
Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).
Want to chat? Join us on Discord https://discord.gg/h52nFrV.
Vote for Utopian Witness!
This project is being supported by @Fundition
Fundition is a next-generation, decentralized, peer-to-peer crowdfunding and collaboration platform, built on the Steem blockchain.
#upfundition and #fundition tags on Steem represent the projects that are started on https://fundition.io.
Are You Prepared to Make the World a Better Place too?
Read the full details of Fundition Fund program
Learn more about Fundition by reading our purplepaper![](https://steemitimages.com/640x0/https://cdn.steemitimages.com/DQmaYfT3fnb6ZyqYLhjHQf3dtSMHiEE8XbThZK6eEhAG542/fundition-large.png)
Join a community with heart based giving at its core
![steemitf.png](https://steemitimages.com/640x0/https://cdn.steemitimages.com/DQmX3cy15dCdj13UHEXJweXi56Ke7wPygVATXTn9M4nJXnP/steemitf.png)
![twitterf.png](https://steemitimages.com/640x0/https://cdn.steemitimages.com/DQmNpvrZZwovgVjvFzECahb1Rxn3DHW44qQRR6ezKaW5tZm/twitterf.png)
![youtubef.png](https://steemitimages.com/640x0/https://cdn.steemitimages.com/DQmb4sujNswmgi3U9HMZhPrzewtnBiq4h2meN2GTGHFncZs/youtubef.png)
![facebookf.png](https://steemitimages.com/640x0/https://cdn.steemitimages.com/DQmY4Uc6ocy3pf5743kevVwY8vSta8s1AZEyXnRaQKRuE8P/facebookf.png)
![instaf.png](https://steemitimages.com/640x0/https://cdn.steemitimages.com/DQmNSCP9MBQ6ND6nEJM7Tw3tHAHSqeXpUpspaoA9BVSSVqd/instaf.png)
![discordf.png](https://steemitimages.com/640x0/https://cdn.steemitimages.com/DQmSxkY56B9RZWXmhUyybUR7ZtsJAf2BHHyH2pGoFLLRaH2/discordf.png)
It sounds great, i have not even heard about it before but it sounds great