Releases: quasarframework/quasar
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...
v0.14.8
v0.14.7
Thanks to all contributors!
Enhancements
- Custom configuration of Loading #1015
- Allow between as a value of align prop in QCardActions #1026
- [Request] QSelect - clearable prop #1018
- Remove ripple effect from inverted form components #1030
- [Request] QInput: add properties autocompletetype, autocapitalize, autocorrect, spellcheck (Ability to add ANY dom properties) #935
- [Request] Scroll to DOM element util #996
- CSS Helper Positioning Class - .absolute-center and .fixed-center #987
- Add date suffix (1st, 2nd, 3rd) token to formatDate() #819
Fixes
- [bug] -webkit-transform causes intermittent screen flash #1009
- QRouteTab - Remove Active Flag when on other Route #1011
- [Vue warn]: Injection "__inputParent" not found (QAutocomplete) #1021
- [Bug] Alert ignoring initial v-model value. #1019
- QInput - do not display clear button when disabled or readonly #1025
- QUploader should not upload file when :disable="true" #1059
- Failed to execute 'getComputedStyle' on 'Window' in QTabs #1063
v0.14.6
v0.14.5
Due to default values in Vue injects as a feature, Quasar v0.14.5 is now compatible with latest Vue (v2.5 as this is written). In fact, it is now a requirement to upgrade to Vue 2.5.
New
- Feature: Autofocusing filter inside of q-select #761
- support bt prefixed icon fonts added #949
- Add current date highlight to material datetime picker component #960
- [Request] Add "print-hide/only" helper classes #950
- QChatMessage: add size attr to manage the size (in col) of each message. #977
Fixes
v0.14.4
New
- [Request] Allow opening/closing QModal, QTooltip, QPopover & QFab via v-model #876
- Add built in easing funcs & update carousel easing #886
- QCarousel and QGalleryCarousel new Boolean prop ('no-swipe')
- [Feature Request] Add leftColor and rightColor as options to QSelect items #913
- Uploader file parse params before file body #904
- Allow readonly in QInput component #901
- Add slot tooltip in fab #928
- Option group for Dialog now supports "inline" property #940
- QRange, individually coloured labels #941
Fixes
- QRouteTab count attribute missing QChip #947
- QCheckbox with non-array model emitting @change event with outdated value #896
- Ripple is triggered when user input isn't necessarily successful #878
- q-uploader not working on my android #877
- QFab close event is not triggered when calling close method with no handler #885
- Slight label misalignment in QTab when hide prop is set to "icon" (on narrow windows only) #881
- QSearch | @click, :after, :before not working #912
- QCollapsible / ItemWrapper - not initializing right side correctly #931
- Scrollbars on QDatetime #933
- QFab | QFabAction - Unset or incorrect Z-index #938
- double-click in modal unexpectedly going back in browser history #945
v0.14.3
v0.14.2
Fixes
- Allow long chip text to wrap #791
- Alert component not accepting html tags in html property #831
- Btn not returning to original state on touch platforms #756
- Fix linear gradient for DateTime component on iOS #833
Features
- QCollapsible - open/close CSS classes (
q-collapsible-opened,q-collapsible-closed)
v0.14.1
Bringing Quasar to the next level. It's a ~70-80% rewrite. Just some of the highlights:
- Form components redone
- Material Ripples
- Completely new 12 points CSS Grid system (95% same syntax) - inspired by Bootstrap's
- Flexbox Lists
- Card component - complete revamp from the previous CSS only version
- Uploader component facelift
- Layout revamp. Smarter header/footer/drawer. Eliminate the "mobile keyboard above input" issue. You'll be able to configure header to hide/show based on user navigation through animation. Insanely easy to place header/footer/drawer(aside) on the viewport and configure where one starts and the other begins (many new possibilities).
- Multiple font icons support (mentioning Fontawesome & Ionicons)
- Observables (element resize & scroll) components
- Tabs revamp (easier to handle to comprehend)
- New Stepper (vertical and horizontal) with some requested features.
- Material Spinner
- Alert component
- Chat revamp (with component)
- Chip component (replacing "label")
- Pick only components you use (tree shaking)
- Remove unused CSS code from bundle (using Purify CSS)
- Out of the box transitions/animations (fork of animate.css)
- Enhance slide transition
- Remove FastClick dependency. No longer needed. (Can be injected on demand)
- Remove Momentjs dependency.
- 24 levels of shadows (as in Material guideline)
These are just the main areas. There are many more enhancements.