Releases: quasarframework/quasar
Releases · quasarframework/quasar
v0.12.0
Minor Breaking Changes
- #281 Datatable - Allow global search without tapping/clicking the filter icon
config.filter
has been removed.- Instead, use
filter: true
for each column (in the column definition) to allow DataTable to make the column filterable.
New
- File Upload component (thanks to @murbanowicz for starting this; see screenshots at the bottom)
- Datetime Range component
- Internationalization is now ready (through props that can replace current default labels)
- CSS class
animate-bounce
v-back-to-top
Vue directive- #232 Dialog - Prevent close
Utils.dom.setScrollPosition (scrollTargetElement, offset[, duration])
Utils.format.humanSize (size)
- turns numbers in kB, MB etc
Fixes
- #286 Unable to remove cookies using Cookies.remove()
- #284 Hardcoded english in DataTable
- #287 Drawer - Bug on Open
- #253 Pull To refresh scroll not smoothly on ios
- #290 [ios] Numeric component value partially hidden (thanks to @caex )
- #289 Tabs "route" prop should support Object too (besides a String)
- #291 v-scroll directive fails to update correctly when parameters change
File Uploader component
Some screenshots with the new component:
v0.11.0
New
- Compatibility with Vue 2.1.7+ (there was a second recent breaking change introduced in Vue 2.1.7).
- Autocomplete component
- Select with List Items
- ListItem component
- #257 Being able to use Google Fonts CDN
- #203 CSS class for Tabs to justify align on desktop too (
justified
) - #224 Dialog - styling buttons
- #260 DataTable: Enhanced sorting capabilities
- DataTable filter selectbox now uses the new "list" type instead of "radio"
offset-0
CSS class (for Grid Layout)- Utils.dom.cssTransform(transformValue)
- Two more platform visibility CSS classes:
platform-android-*
,platform-ios-*
. Examples:platform-android-only
,platform-ios-hide
-- do not mistake them with theme visibility CSS classes (ios-only
,android-hide
etc). - Utils.filter()
Fixes
- #285 close dialog doesn't work in electron
- Slider fullscreen on Electron
- Firefox - Hide the numeric spinner (thanks to @maced0n)
- DataTable sorting for columns with numbers
- DataTable error when no data is available and there are no messages specified (thanks to @tant42)
- #220 [ios] Search Bar Icon
- #264 [ios] Search component input text slightly misaligned
- #269 Datatable bodyStyle for narrow screens
- #217 [ios] Insufficient margin in the Drawer header
- #261 q-numeric with 0.1 step lacks rounding
- #187 [ios] Delay in tabs
- #213 Button type FAB does not float on iOS
- Array.prototype.find() polyfill for IE compatibility
v0.10.3 - Repackaged v0.10.2
Repackaged v0.10.2 to workaround a problem with rollup-plugin-vue compiler and Vue 2.1.5+.
Please use Quasar v0.10.3 with Vue >= 2.1.6
Upgrade to v0.10.3 if you stumble on "_h is not defined" or "_c is not defined" issues.
v0.10.2
Enhancements & fixes
- #242 DataTable - Class/Style formatters similar to value formatter
- #243 DataTable - Firefox issue
- #246 DataTable - Adding/removing columns to/from array doesn't update table
- #247 DataTable - mouse wheel scroll not working on Firefox
- Support for password in a Dialog (thanks to @livioalves)
- Removed max-width for "layout-padding" CSS class
v0.10 - DataTable comes along
- DataTable component (replacing old Grid component from Quasar <= 0.7)
- Sticky columns
- Sticky headers
- Filter (by all columns or by one column)
- Sorting by columns
- Cell formatter methods
- Cell component renderer (through Vue scoped slots)
- Pagination
- Column picker
- Row selection (single or multiple)
- Responsive (changes view design when width is smaller than 600px to best accommodate small screens)
- Refresh functionality
- Ajax loading bar (like Youtube)
- Intercepts Ajax calls regardless of Ajax library you're using.
- Positioning on top, bottom, right or left
- Direction support (default or reverse) for all 4 positions
- Delays showing up with 1s (no reason to bother for calls that take less than 1 second)
- Custom color support
- Select & Datetime
static-label
prop- labels are rendered as HTML code instead of a simple String
v0.9.1
Behold Quasar v0.9.1 is here. Along stable releases of Webpack2 app template/boilerplate and Electron wrapper.
Breaking Changes
- #164 Smaller component prefix ("q-" instead of "quasar-") for both JS and CSS
Some examples: instead of<quasar-checkbox>
use<q-checkbox>
; instead of<quasar-modal>
use<q-modal>
. Simply make a project-wide replace of 'quasar-' to 'q-' then replace 'q-framework' to 'quasar-framework'. - Popovers - check documentation
- no longer require
anchor-ref
prop. Simply place them under the DOM node / component that you wish to trigger it. anchor-origin
&target-origin
have been renamed toanchor
andself
and now take string params instead of objects for convenience
- no longer require
- Drawer links component (
q-drawer-link
former known asquasar-drawer-link
) now hasto
prop working just asv-link
. So it encapsulatesexact
modifier as a property of the Object.
Example:<q-drawer-link :to="{path: '/account', exact: true}">...</q-drawer-link>
- Removed $text-color and $background Stylus variables (not required and they stand in the way in some scenarios)
- #173 Center content for "layout-padding" on large windows (thanks to @murbanowicz )
- #212 Removed Textarea default height
New Features
- Dialog has new props:
- (Boolean) noBackdropDismiss
- (Boolean) noEscDismiss
- (Function) onDismiss - function gets called when Dialog is dismissed or closed; good for cleaning up
- Form components with readonly and error state (readonly DOM node attribute and
has-error
CSS class) - Range option to always display label (
labelAlways
prop) - Tooltip component (replacing
v-tooltip
directive) - documentation - Datetime
- ability to clear selected date
placeholder
and (floating)label
propsmin
&max
props- allows empty string binded value on render
- performance improvements
- Modal
noBackdropDismiss
&noEscDismiss
props which disable the ability to close Modal with Escape key or by clicking on the backdrop (thanks @ccoxtn )
- Quasar transition component (former
quasar-transition
nowq-transition
)- new prop:
appear
which when used it applies the transition to the initial render of the node too
- new prop:
v-link
directive- now supports
delay
modifier which delays the trigger of the new route for 100ms - applies
router-link-active
CSS class
- now supports
v-touch-pan
directive has newscroll
modifier to also allow scroll- Improved HTML table element CSS - check documentation
horizontal-delimiter
andvertical-delimiter
classesstriped-odd
andstriped-even
classesloose
alongcompact
classes- Flipped mode (through
flipped
class) - table header as column on left, rows as columns - Responsive mode (through
responsive
class) - good for narrow screens, check it out
- Double Range new features: drag by range & disable min or max (thanks to @CookieJon ) - check documentation
- #158 Datetime & Selectbox now use a floating label
- Detection if running under Electron
- new visibility CSS classes:
electron-only
andelectron-hide
- new Platform.is prop when on Electron:
Platform.is.electron
- new visibility CSS classes:
- Collapsible new prop 'icon-toggle` which allows user to toggle open/close state by clicking/tapping only on the Collapsible icon on the right
quote
CSS class- No longer required to explicitly set theme (with
Quasar.theme.set()
) before installing to Vue. - New Utils:
scrollbar.width()
- determines scrollbar width in pixelscolors.rgbToHex()
andcolors.hexToRgb()
Fixes
- #227 Dialog/ActionSheet are not destroyed in some situations (thanks to @llops )
- #208 Action Sheet Dismiss by backdrop or Escape key should trigger cancel handler
- #153 Drawer links now work with VueRouter "history" mode
- #166 Pull To refresh not allowing scroll
- #168 "error" icon for negative Toast instead of "whatshot"
- Search component
- allow user to focus field on left side too
- #178 iOS component alignment
- Drawer's
drawer-closer
CSS class now stops event propagation to avoid some side-effects - #205 Touch directive error on unbind (thanks to @joaopaulofilho )
v0.8.2 / v0.8.3
v0.8.0 with Vue2
Quasar is now powered by Vue 2.
Use CLI to generate a new project folder and port your app to Quasar v0.8.0 and Vue 2.
New
- All form components (and not only) now support
v-model
instead of:model.sync
. Please be careful with porting Radio components: they now supportv-model
andval
(instead ofvalue
) prop. - Touch directives:
v-swipe
,v-pan
,v-hold
- Automatic coloring of mobile browser address bar (thanks to @vuchl )
- New CSS animation classes:
animate-pop
,animate-scale
,animate-fade
Changes
- Removed
vue-touch
andHammerjs
as dependencies. AlsoVelocity UI Pack
. Slimmer builds! spin
andblink
CSS classes were renamed toanimate-spin
andanimate-blink
- ActionSheet.create() does not require also calling show() on it; "buttons" property was split into "actions" and "dismiss"
- Dialog was completely redone. One of the important changes: you can mix form components now. Added Rating, Chips, Textareas, Numeric as possible form components you can use.
- Modal is now only a component. No more global "Modal.create()"
- Customizable Loading; it also fades in when it gets displayed now
- Tabs have been completely redone due to Vue2 and they have lots of improvements.
- New Datetime methods that can be used with a Vue reference (open(), close()).. check documentation
- Numeric component now opens the numeric keyboard; removed "debounce" property (no longer needed due to a new button contained by the component)
- Collapsibles' props and methods have changed
- Floating action buttons have new properties and methods. Check documentation.
- Infinite Scroll: removed "working" property as it is no longer needed.
- Stepper: removed "redraw()" method (not needed anymore)
- New transition component (
<quasar-transition name="slide">
) replacingtransition="slide"
attribute-value - Popover was completely redone with lots of new features!
- Updates for Drawer (including
<quasar-drawer-link>
component!) - Some internationalization work for Datetime
- Events rebuilt around a Vue bus
Fixes
- Various Range fixes
- Utils.debounce() now works with functions receiving parameters
- Error on Cookies.get() function #133
Removed
- Temporarily, Grid component (not Grid CSS) has been removed. Will get reinstated in a few weeks.
- Removed Utils.dom.childOf(). You can use native DOMElement.contains(node).
- Removed
v-attr
directive (no longer needed) - Removed
left-drawer-opener
andright-drawer-opener
CSS classes. Check Drawer to see updates v-tooltip
no longer supports "wrap" modifier. You can however wrap that element yourself.
Regards to @kristianmandrup for his help on this Vue 2 port.
v0.7.0 a.k.a "Polished"
Upgrade to v0.7 Guide
- npm install --save moment
- In your
src/app.js
file, make sure you haveQuasar.theme.set(__THEME)
called BEFOREVue.use(Quasar)
Breaking Changes
- Reworked Lists. Have a good read and update your App's code to the new specs. Total rewrite.
- Reworked HTML table class classes. You now have to add
quasar-table
CSS classname to a table. Revisit class list. - Tabs
disabled
property was changed todisable
for consistency with new disabled state for all Form components - Reworked Select to use Popovers (instead of Dialogs) and added Dialog Select which uses Dialogs. Revisit pages to learn about the changes.
- Removed Keycodes
- Toast total rework. Toasts are now displayed one at a time, but you can build up a queue of them. Highly configurable. Most of the API is still the same, but reworked everything under the covers. You may want to check doc to ensure you're using right.
New
- Improvements on almost all components
- Datetime picker, both Inline and as Input. Each theme has its own component (specific to the respective theme) wrapped within same functionality.
- Double Range
- Knob component
- Progress Button component (buttons with animated progress bars)
- Directive
v-go-back
- New Modal methods
- Inline Modal. Write Modal template directly inside your Page's template and access its "data" scope!
- Input textboxes with Stackable and Floating labels are not bound to Lists anymore. You can use them outside of lists too!
- Chips Textboxes placeholder property
- Infinite Scroll functionality (many new methods)
- Smoother Parallax effect. Also new `speed' property (Float 0 to 1 values)
- Disable state for all Form components (and not only!) using
disable
Boolean property - New properties for Search component:
icon
andplaceholder
- Ability to disable Pull to Refresh functionality
- Smarter Popover with new functionality.
- New Stepper methods to better control it. Also polished the design.
- Chat coloring bubbles
- Image Gallery Slider now closes Thumbnail view if click/tap outside of it
- Utils.throttle() method
- Utils.dom new methods:
childOf()
,getScrollTarget()
,getScrollPosition()
- Drawer new methods. Also see this request
- ActionSheet, Dialog, Modal, Popover, ... can now be closed by "Escape" key on desktop: #60
Fixes
v0.6.0
Breaking Changes
- Dropdown has been renamed to Popover which is much more appropiate for what it does.
Simply rename<quasar-dropdown>
to<quasar-popover>
and read the Popover docs - Removed Dialog with Ranges. It turned out to not be so useful and with the new Range component it becomes not enough configurable.
New
- Context Menu component specific for mobile (now differs from the one on a desktop)
- "Chip" Label type
- Chips Input Textbox component
- Stepper component
- Utils.uid() generates unique UID
- #19 Include Quasar sources in npm packages so you can easily extend components
- Added 'white' to color list - available to all components that can be colored
- CSS class "timeline-title" added
- CSS class "caption" for
<p>
tags now has top margin also
Fixes
- #18 Dropdown (now Popover): v-on:click events inside quasar-dropdown doesn't work
- #20 Back button on Modal should close it
- #15 Rewritten Range to support new features:
- "step" property
- colored styles
- step markers
- "snap" property
- "label" property
- #26 Need a way to close thumbnails for Image Gallery
- #25 Slider on fullscreen doesn't go away when on fullscreen
- Enhanced Tabs reactivity