Releases: quasarframework/quasar
v0.15.9
New
- [Request] Date picker
minimalprop #1818 - Enhance QModal enter-active-class/leave-active-class props to have higher priority over transition
- Q-Chips-Input: Add Duplicate Entry Event or warning #1805
- QWindowResizeObservable: use ResizeObserver native API if available, improve delay
- perf/design(QCollapsible): remove default ripple and highlight
- QUploader: Allow to programmatically upload files #1791
- New Quasar language packs: Bulgarian, Arabic, Vietnamese
Fixes
- iOS touch/hover (aka double tap) issue on Modals & derivates (Dialog, etc)
- Opening Model / Drawer causes layout change #1771
This will display the scrollbar of the page even with Modal/Dialog/Drawer opened, but user will not be able to scroll page by using mouse scroll. - QScrollArea: setScrollPosition not working on mobile platforms #1830
- QLayoutDrawer: close the other mobileOpened side even if it is not mobile (#1821)
- QLayoutDrawer: overflow:hidden lingers after closing a drawer by dragging #1809
- date utils: isSameDate() returns erroneous results in certain scenarios #1804
- QTabs: default white background should go to tabs head instead -- when using inverted
- this.$q.notify (Quasar Notify Plugin) not available in main App Vue instance #1797
- [windows] Firefox and Quasar 0.15.8 Drawer "close event" response Problem ... #1836
Enjoy!
v0.15.8
New
- perf: QResizeObservable using ResizeObserver API when available
- perf: QTabs (Material theme) - do not animate position bar when selecting a tab (if no previous tab was selected)
- perf: Faster QLayout initial render
- QUploader: Allow to programmatically upload files #1791
- QPagination: increase min-width to 2em for better mobile support
Fixes
- $q.fullscreen not available if device doesn't supports Fullscreen API #1764
- QLayoutDrawer: RTL positioning when switching back and forth to a Quasar RTL language pack
- Initial QLayout view should not animate Drawer #1783
- (also perf) QKnob/QSlider/QRange: emitting
@input/@change - QTable: sort for non-strings column content (#1778)
- QPopover: change the way reposition is done (#1757)
- (UMD) QOptionGroup: tag name detection to work for kebab/camel/pascal case
- QBtn: Make focus helper and ripple extend over bottom border for "push" type (#1772)
- QLayout: header/footer/drawer offset not updated on start (#1770)
- Fix IE form components height (#1769)
v0.15.7
Also check Quasar CLI v0.15.10 release notes.
New
- Dynamic branding colors - configurable at any time during runtime - More Info
- Smooth drawer (big performance tweak, especially noticeable on low end mobiles)
- Improve Layout components user response time
- QChip: new "dense" prop; design improvements on floating QChip
- QResizeObservable new property (debounce - Number, default 100)
- QStepper: flag to disable navigation through header #1716
- Quasar components inside templates using PascalCase #1601
- Add alternate text to object elements #1693
- refactor: AddressbarColor plugin - better perf, avoid duplicating meta tags, make use of CSS color props
- QLayoutDrawer: Add "no-hide-on-route-change" property #1697
- QDialog - hitting ENTER key when using prompt submits the Dialog (same as hitting OK button)
- Turkish Quasar language pack
- Default duration is now 600ms #1760
Fixes
- QPageSticky offsets when toggling a Layout Header/Footer/Drawer
- Fix Layout page offsets when navigating sub-routes that have different header/footer embedded into them
- Fix Layout page bouncing up or down on route change
- QList Side Icons squashed with fontawesome icons
- QColorPicker - fix alpha value detection when using spaces
- IE fixes: QResizeObservable object visibility and QList main flex (#1720)
- QInput: add an empty row at end of textarea to prevent scroll related problems
- HMR reload problem with parent field
- QUploader: extensions comparisons case-insensitive
- QUploader: QList not being imported #1696
- QTable: Sorting on boolean column fails #1689
- QInput: Vertical scrolling in textarea #1048
- QDatetime Prevent Prompting of Time when Selecting Just a Date #1663
- QDatetime "after" handler not setting popup value via v-model bind #1686
- breadcrumb separator is displayed even if next breadcrumb element is not visible #1639
- Breadcrumbs with & without Icons have wrong horizontal alignments #1745
- QDatetime & QColor fixes: Doubling blur/input events; setting model with before/after; keep focus when popover/modal gets opened; Modal "cancel" button not working as expected
- Promise API detection on polyfill
- QDatetimePicker: Reset to default view after closing modal (#1762)
Enjoy!
v0.15.6
v0.15.5
New
- Full RTL support! http://quasar-framework.org/components/rtl-support.html
- Farsi language pack
Fixes
v0.15.4
Fixes
- ie11 fails with syntax error at strip-ansi eval #1618
- QUploader
extensionsproperty not working with drag and drop #1647 - QCarousel @slide event is not emitting #1659
- QAutocomplete - can't type space when popover is opened #1652
- Fix inexistent MDI icons in Quasar icon set
- Breadcrumbs - not resetting text-decoration: underline from -webkit-any-link #1643
Enhancements
- QPageSticky "expand" new prop. Check it out! Very useful for working with layouts. http://quasar-framework.org/components/page-sticky.html#Expand-mode
- RTL work for Layout, Material Ripple, and various other areas
- New language packs: Hebrew, Dutch, Swedish
- QCarousel new event: "slide-trigger" (emitted before animation starts)
- QCarousel - pulling towards inexistent slide (-1, length +1) now hinders touch/mouse actions
- Improve QTabs design (both themes)
- QToolbar: add
text-colorprop to be consistent with the other components
v0.15.3
v0.15.2
Small refinements:
- Fixed i18n for IE11 + many other various IE11 fixes
- QTable -- watch page not to exceed available total pages
- Popover from Select shows briefly while the control first loads
- Fixed visual feedback for buttons on iOS platform
- Added Norwegian language to i18n
- Fixed iconSet when referring to "material-icons" (previously was wrongly working with "material" value)
- Fixed a minor misalignment on buttons when using "loading" prop
- Added support for QBtnDropdown in QBtnGroup
- Removed default behavior for Dialog buttons waiting for ripple effect to be over before triggering
v0.15.1
v0.15 is finally out!
I would like to thank everybody involved. The community is awesome! Special notes about:
- Our main sponsors: Truelogic, Campus Cloud Services and Juggle Street
- ALL our backers. You are wonderful and you make Quasar happen!
- @pdanpdan (part of core team) and @BenoitRanque (for his endless support on forum and Gitter chat)
Please also visit our Patreon page. Any help really counts!
Upgrading to Quasar v0.15
There's been A LOT of work done for v0.15. The Quasar CLI has been rewritten from scratch to allow for a stellar development experience (Mobile App developers and Electron will fall in love with it!). Only one starter kit is required in order to handle websites, PWAs, Mobile Apps and Electron Apps. Building any of those is a matter of just adding a parameter to the dev/build command.
Furthermore, you can now use an UMD/standalone version of Quasar to embed in an existing project. No build step is required.
Take some time to read all "Guide" pages once again. It will help you understand the true power of Quasar v0.15 and what you can do with it.
So, what is new and what has changed? Everything has been polished. The full list of enhancements and new features is exhausting. We'll try to cover the major parts only. This is just a guide to get you started so that you know where to look in docs for things that have changed.
First step - when using starter kit
Ok, so you've globally installed/updated "quasar-cli" to latest v0.15.x. Now it's time for you to create a new project folder:
$ npm install -g quasar-cli
# Then we create a project folder with Quasar CLI:
$ quasar init <folder_name>Observe the new project structure. Start to port out files to the new project folder, taking into account the far superior structure. Using the new starter kit will allow you to take advantage of future seamless upgrades! In any case, do not simply copy your /src folder over to the new starter kit.
Build configuration no longer required
You'll notice the new starter kit doesn't provide a /build or /config folders. They are no longer required. Everything can be easily configured from /quasar.conf.js now. You don't need to know Webpack. More Info.
No main.js?
Yes. It's no longer there because you don't need it anymore. For initialization code and importing libraries into your website/app, read about App Plugins.
Importing Components/Directives/etc
You're no longer required to import Quasar components and directives anywhere in your app. Simply configuring /quasar.conf.js in framework Object will suffice. More Info.
Quasar Plugins?
Yes, this refer to Action Sheet, Notify (replacement of Toast and Alert), LocalStorage/SessionStorage and so on. They are available globally or under the Vue $q Object injection, and need to be specified in /quasar.conf.js > framework > plugins in order for them to be available.
Revamps
- Typography
- Flex CSS gutter classes
- QLayout & co. You'll love the new features! Be sure to check this out. Major improvements in syntax and flexibility. Some breaking changes, like slots no longer being used.
- QBtn (new features!)
- QToolbar (small update regarding buttons)
- QBreadcrumbs (powerful component instead of just CSS)
- QPagination (major improvements)
- QCollapsible (new powerful features!)
- QTable (replacing QDataTable -- full customization now!)
- Lists & List Items -- more options, better control, "dark" theme
- QTree (the most advanced you'll ever see and need!)
- ActionSheet (now as a Quasar Plugin & QActionSheet component too! -- has new features too)
- Dialog (now as a Quasar Plugin & QDialog component too for unlimited flexibility! -- has new features too)
- QModal - Easier to use than ever! Now with full v-model support.
- QPopover & QTooltip - new animation, ability to close it without the need of a Vue reference (through
v-close-overlaydirective), full support for v-model now - Loading (now as a Quasar Plugin)
- QCarousel - Easier to use. Fully customizable!
- Transitions - No need for QTransition anymore! Minimum overhead, better performance.
- QAlert - new features
- QChat - new features
- TouchSwipe, TouchHold and TouchPan - Much better implementation, more control. Read about these directive's modifiers.
- AppFullscreen & AppVisibility - Now as Quasar Plugins, with reactive state properties that can be used in Vue watchers
- QUploader - new features & design
Also notice QInlineDatetime has been renamed to QDatetimePicker.
New Components or Features
- Spacing CSS classes
- QTable - It's on the Revamps list too, but it sure deserves a place here too. Prepare for next level Data Tables, now fully customizable! Check out the demo too.
- QEditor - Quasar's own WYSIWYG approach! This alone would deserve its own section.
- Notify - A merge between Toast and Alert, with flexible positioning and awesome animations.
- QColor - Color Picker!
- New button types: QBtnGroup and QBtnDropdown
- QBtnToggle - A radio-like component, but with buttons
I18n for Quasar Components
Be sure to check out the Internationalization for Quasar Components.
Icon Packs
You can now tell Quasar to use one of Fontawesome, Ionicons, MDI or Material Icons for its components. You are no longer required to include Material Icons. You can use any of these packs as default.
Also, small change for Fontawesome icons:
<!-- pre v0.15 -->
<q-icon name="fa-paypal fab" />
<!-- v0.15+ -->
<!-- Copy paste fontawesome icon class as it's in fontawesome docs now -->
<q-icon name="fab fa-paypal" />Vue Prototype Injections
You can use $q injection for convenience, accesing Quasar Theme, Quasar I18n, Quasar Platform, and many more. Quasar Plugins add functionality to it. Read doc page, especially if you build Cordova or Electron apps.
What has been dropped?
- Global Event Bus (Events) -- no longer needed. Use Vue root component events instead. More Info
- QFixedPosition -- now replaced by a more powerful QPageSticky
- QSideLink -- no longer required! Simply use a QItem or whatever component you want and bind an
@click="$router.push(...)"to it. - Alert and Toast as methods. They've been merged into Notify.
- HTML Table. You can however check code from v0.14 and embed it yourself into your app.
- Image Gallery - no longer needed. The new QCarousel is so powerful that you'll immediately see the benefit of switching to it.
- QTransition - no longer required. Simply use Vue's
<transition>instead. More Info - QDatetimeRange - it's so easy to simply write two QDatetime side by side that this component is simply not required anymore; this allows you full flexibility too.
New Layout
The following upgrade guide for QLayout barely scratches the surface, but it's a starting point.
<!-- v0.14 -->
<q-layout ref="layout" view="hHr LpR lFf" :right-breakpoint="1100">
<!-- Header -->
<q-toolbar slot="header">
<q-btn flat @click="$refs.layout.toggleLeft()">
<q-icon name="menu" />
</q-btn>
<q-toolbar-title>
Layout Header
<span slot="subtitle">Optional subtitle</span>
</q-toolbar-title>
<q-btn flat @click="$refs.layout.toggleRight()">
<q-icon name="menu" />
</q-btn>
</q-toolbar>
<!-- Navigation -->
<q-tabs slot="navigation">
<q-route-tab slot="title" icon="view_quilt" to="/test-layout/about" replace hide="icon" label="About" />
<q-route-tab slot="title" icon="view_day" to="/test-layout/toolbar" replace hide="icon" label="Toolbar" />
<q-route-tab slot="title" icon="view_day" to="/test-layout/tabs" replace label="Tabs" />
<q-route-tab slot="title" icon="input" to="/test-layout/drawer" replace label="Drawer" />
</q-tabs>
<!-- Left Side Panel -->
<div slot="left">
<q-list no-border link inset-separator>
<q-list-header>Essential Links</q-list-header>
<q-side-link item to="/docs">
<q-item-side icon="school" />
<q-item-main label="Docs" sublabel="quasar-framework.org" />
</q-side-link>
</q-list>
</div>
<!-- Right Side Panel -->
<div slot="right">
Right Side of Layout
</div>
<!-- sub-routes get injected here: -->
<router-view />
<!-- Footer -->
<q-toolbar slot="footer">
<q-toolbar-title>
Layout Footer
</q-toolbar-title>
</q-toolbar>
</q-layout>We upgrade it to v0.15. Notice that in order for us to place navigation tabs on header (for Material) and on Footer (for iOS), we also write a NavTabs component. Notice no...