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 )