Quasar Framework Upgrade
===
# Best Practices
Before you start down this journey of upgrading Quasar Legacy to Quasar v1 you should know a few things:
1) Read the documentation before asking questions on Discord server or forums.
2) Prepare a CodePen so staff can help you.
3) Dig into the Quasar source code (it'll help you understand the framework as well as teach you best practices for programming with Vue).
4) Don't use framework components as mixins unless absolutely necessery (wrap them if you need).
5) Don't target inner component stuff with CSS selectors unless absolutely necessary.
6) We recommend `yarn` whenever possible because of its speed and efficient use. However, when using globals, we still recommend using `npm`, especially if you use `nvm` (Node Version Manager).
7) Use `git` for repository management and make regular commits, it is like taking notes on the process and lets you revert to a previous state in case you get stuck.
8) Use Quasar boot files for any pre-mounting app routines.
9) Be very cautious when using other libraries - Quasar can't ensure they will be fully compatible
10) Finally, become a [Quasar Patreon](https://www.patreon.com/quasarframework) and get access to the special Discord support chat room for priority support.
# Introduction to Upgrading
While upgrading Legacy Quasar projects appears like a reasonable choice, it may not always present itself as the best solution. Just be aware that there are alternative measures that may be faster and more efficient. For instance, sometimes it is best to create a new project and port your old project. In this manner, if you do it slowly and methodologically you can see issues and resolve them quickly. This is the opposite of upgrading a project in-place, which can break everything simultaneously. Should you go with the upgrade, we have assembled the steps needed below. However, you will still need to update any Quasar components that went through a revision to get to v1.
In either case, when you build out your project as you go through this process, you may get a build error that gives no valid information and you will have no idea what might be causing it. Should this happen to you, we recommend running `quasar build` instead of `quasar dev` as the production build will sometimes give different information (from webpack) than the dev build.
If you get stuck, check out the forums and visit Discord server for help. Not just from staff, but from the community as well.
Whichever path you take, good luck!
> INFO
> It should be noted that we have tried our hardest to make sure everything in the Upgrade documenation is correct. However, because this has been a manual process there are likely errors. If you find any, don't be afraid to make a PR and propose a change to that which needs to be corrected.
# Initial Steps
The best way to start upgrading your project is to follow these steps:
1) First, verify your current info with `quasar info`:
```bash
Global packages
quasar-cli 0.17.23
Important local packages
quasar-cli 0.17.23 (Quasar Framework CLI)
quasar-framework 0.17.19 (Build responsive SPA, SSR, PWA, Hybrid Mobile Apps and Electron apps, all simultaneously using the same codebase)
quasar-extras 2.0.9 (Quasar Framework fonts, icons and animations)
```
This shows the Legacy Quasar versions (we'll do this again at end of the steps to verify upgrade)
2) Remove local `quasar-cli` package
```bash
$ npm uninstall --save-dev quasar-cli
# or
$ yarn remove quasar-cli
```
3) Remove folders `.quasar`, `node_modules` and `package-lock.json` or `yarn.lock` file
4) Install `quasar` and `@quasar/extras` as dependency
```bash
$ npm install --save quasar @quasar/extras
# or
$ yarn add quasar @quasar/extras
```
5) Install `@quasar/app` as development dependency
```bash
$ npm install --save-dev @quasar/app
# or
$ yarn add --dev @quasar/app
```
6) Re-install all the npm packages
```bash
$ npm install
# or
$ yarn
```
7) **Babel Upgrade**
Start by **removing** the old `.babelrc` and **creating** a new `babel.config.js`
Then update your `babel.config.js` to
```js
module.exports = {
presets: [
'@quasar/babel-preset-app'
]
}
```
8) **Rename** the folder `src/plugins` to `src/boot`
9) In `quasar.conf.js` **rename** the key section `plugins` to `boot`
```js
module.exports = function (ctx) {
return {
// app plugins (/src/plugins)
plugins: [
],
```
should look like this:
```js
module.exports = function (ctx) {
return {
// app boot (/src/boot)
boot: [
],
```
Do not get the Quasar plugins mixed up. Do not change this:
```js
// Quasar plugins
framework: {
plugins: [ // do NOT edit here
'Notify'
]
}
```
10) In `quasar.conf.js` **rename** the value `fontawesome` to `fontawesome-v5`, `mdi` to `mdi-v3` and `ionicons` to `ionicons-v4` inside the `extras` section, if you use them. Even if you don't use them it is still good practice to rename them in case you do use them in the future.
11) In `quasar.conf.js` > `framework` > `iconSet` do same replacements as above to its value (`fontawesome` to `fontawesome-v5`, `mdi` to `mdi-v3` and `ionicons` to `ionicons-v4`)
12) In `quasar.conf.js` **rename** in `framework` > `i18n` to `lang`
13) Check if you have a file named `quasar.variables.styl` in the folder `~/src/css`, if not, create it. Add the following to it:
```stylus
// Quasar Stylus Variables
// --------------------------------------------------
// To customize the look and feel of this app, you can override
// the Stylus variables found in Quasar's source Stylus files.
// Check documentation for full list of Quasar variables
// It's highly recommended to change the default colors
// to match your app's branding.
// Tip: Use the "Theme Builder" on Quasar's documentation website.
$primary = #027BE3
$secondary = #26A69A
$accent = #9C27B0
$positive = #21BA45
$negative = #C10015
$info = #31CCEC
$warning = #F2C037
```
14) In the folder `~/src/css`, **remove** the `themes` folder.
15) Last, but not least, do a sanity check with `quasar info`:
```
Global packages
@quasar/cli - 1.0.0-beta.0
Important local packages
quasar - 1.0.0-beta.3 -- High performance, Material Design 2, full front end stack with Vue.js -- build SPA, SSR, PWA, Hybrid Mobile Apps and Electron apps, all simultaneously using the same codebase
@quasar/app - 1.0.0-beta.5 -- Quasar Framework App CLI
@quasar/extras - 1.0.0 -- Quasar Framework fonts, icons and animations
```
Notice the versions that are different from step 1.
16) If you haven't already done this then it's time to **remove** the Legacy Quasar `quasar-cli` and **install** the new `@quasar/cli`.
a) **Remove** global Quasar CLI
```bash
$ npm remove -g quasar-cli
# or
$ yarn global remove quasar-cli
```
b) **Install** global Quasar CLI
```bash
$ npm install -g @quasar/cli
# or
$ yarn global add @quasar/cli
```
All that remains now, is fixing your pages and components for correctness.
The information below can be used as a reference.
---
# Changes
## Build Themes
- The iOS theme is no longer available.
## Quasar CLI
- To create a new project use `quasar create` instead of `quasar init`
- The `--theme, -t` option is no longer available as a build option.
- `quasar describe` was added for command-line help with Quasar components, etc.
- `quasar inspect` is a new option to see generated Webpack config.
- `quasaer ext` is a new option for management of Quasar App Extensions.
- `quasar new plugin ...` is now `quasar new boot ...`
## Build Output
- The electron dist folder becomes `dist/electron` instead of `dist/electron-mat` or `dist/electron-ios`
## Animation
- The JS and CSS animations were removed for v1. However, they will be offered as a separate Quasar package when v1 fully releases. Until then, if you need them, you can add them manually to your quasar project by pulling them directly out of the v0.17 repository and adding them to your project.
- https://github.com/quasarframework/quasar/blob/v0.17/src/css/core/motion.styl
- https://github.com/quasarframework/quasar/blob/v0.17/src/utils/animate.js
## Misc
- `this.$q.i18n` was changed to `this.$q.lang`
- `this.$q.icons` was changed to `this.$q.icon-set`
## Color Palette
The colors `faded`, `dark`, `light` were removed. If you need those, re-add them in a new Stylus file.
```Stylus
// Variables
$light = #bdbdbd
$dark = #424242
$faded = #777
// CSS3 Root Variables
:root
--q-color-light $light
--q-color-light-d darken($light, 10%)
--q-color-faded $faded
--q-color-dark $dark
// CSS Classes
.text-faded
color $faded !important
color var(--q-color-faded) !important
.bg-faded
background $faded !important
background var(--q-color-faded) !important
.text-light
color $light !important
color var(--q-color-light) !important
.bg-light
background $light !important
background var(--q-color-light) !important
.text-dark
color $dark !important
color var(--q-color-dark) !important
.bg-dark
background $dark !important
background var(--q-color-dark) !important
.text-faded
color $faded !important
color var(--q-color-faded) !important
.bg-faded
background $faded !important
background var(--q-color-faded) !important
```
## CSS
### Color
- The `tertiary` color was renamed to `accent`. This applies to *Brand Colors* as well as *Color List*.
|v0.17|v1|
|-|-|
|`$tertiary`|`$accent`|
|`.bg-tertiary`| `.bg-accent` |
|`.text-tertiary`|`.text-accent`|
### Style & Identity
#### Headings
||v0.17|v1|
|-|-|-|
|h1|`.q-display-4`|`.text-h1`|
|h2|`.q-display3`|`.text-h2`|
|h3|`.q-display2`|`.text-h3` |
|h4|`.q-display1`|`.text-h4` |
|h5|`.q-headline`|`.text-h5` |
|h6|`.q-title`|`.text-h6` |
||`.q-subheading`|`.text-subtitle1` or `.text-subtitle2` |
||`.q-body1`|`.text-body1` |
||`.q-body2`|`.text-body2` |
||`.q-caption`|`.text-caption` |
|||`.text-overline` |
#### Text Types
|v0.17|v1|
|-|-|
|`.quote`||
#### CSS Helper Classes
|v0.17|v1|
|-|-|
|`.capitalize`|`.text-capitalize`|
|`.lowercase`|`.text-lowercase`|
|`.uppercase`|`.text-uppercase`|
|`.round-borders`|`.rounded-borders`|
||`.no-border`|
||`.no-border-radius`|
||`.no-box-shadow`|
#### CSS Visibility
|v0.17|v1|
|-|-|
|`.highlight-and-fade`||
|`.mat-only`||
|`.ios-only`||
|`.mat-hide`||
|`.ios-hide`||
#### Mouse Related
|v0.17|v1|
|-|-|
||`.cursor-inherit`|
||`.cursor-none`|
||`.cursor-not-allowed`|
#### Border Related
|v0.17|v1|
|-|-|
|`.round-borders`|`.rounded-borders`|
### Layout & Grid
#### Grid Row
|v0.17|v1|
|-|-|
||`.order-first`|
||`.order-none`|
||`.order-last`|
||`.offset-<size>-<columns>`|
- <size> is one of `xs`, `sm`, `md`, `lg` or `xl`.
- <columns> is 1 through 12.
#### Grid Column
|v0.17|v1|
|-|-|
||`.col-auto`|
||`.col-xs-auto`|
||`.col-sm-auto`|
||`.col-md-auto`|
||`.col-lg-auto`|
||`.col-xl-auto`|
#### Grid Gutter
|v0.17|v1|
|-|-|
|`.gutter-xs`|`.q-gutter-xs`|
|`.gutter-sm`|`.q-gutter-sm`|
|`.gutter-md`|`.q-gutter-md`|
|`.gutter-lg`|`.q-gutter-lg`|
|`.gutter-xl`|`.q-gutter-xl`|
||`.q-gutter-none`|
||`.q-col-gutter-xs`|
||`.q-col-gutter-sm`|
||`.q-col-gutter-md`|
||`.q-col-gutter-lg`|
||`.q-col-gutter-xl`|
## Directives
|v0.17|v1|
|-|-|
||`v-close-dialog`|
|`v-close-overlay`|`v-close-menu`|
||`v-touch-repeat`|
- If you are using the new `QMenu` component, you can alternatively use the `auto-close` property.
## Plugins
### Action Sheet (QActionSheet)
- renamed to **Bottom Sheet**
- was a component, but is now a plugin
### Local/Session Storage
The structure looks the same, but some functions have been renamed.
|v0.17|v1|
|-|-|
|LocalStorage.get.item(key)|LocalStorage.getItem(key)|
|SessionStorage.get.item(key)|SessionStorage.getItem(key)|
|this.$q.localStorage.get.item(key)|this.$q.localStorage.getItem(key)|
|this.$q.sessionStorage.get.item(key)|this.$q.sessionStorage.getItem(key)|
## Components
- The components below are in alphabetical order for easier access.
### QActionSheet
- **removed**, use `QBottomSheet`
### QAlert
- **removed**, use `QBanner`
- The properties `type` and `color` are now managed by a [background css class](https://v1.quasar-framework.org/style/color-palette#Using-as-CSS-Classes).
**Properties**
|v0.17|v1|
|-|-|
|`type`||
|`color`||
|`text-color`||
|`message`||
|`detail`||
|`icon`||
|`avatar`||
|`actions`||
||`inline-actions`|
||`dense`|
||`rounded`|
### QAutocomplete
- **removed**, built into `QSelect`
### QBreadcrumbs
**Properties**
|v0.17|v1|
|-|-|
|`color`||
||`gutter`|
||`deparator-color`|
### QBreadcrumbsEl
**Properties**
|v0.17|v1|
|-|-|
|`color`||
|`event`||
### QBtn
- Type of `align` was changed from `string` to `any`
- Type of `tabindex` was changed from `number` to `number|string`
**Properties**
|v0.17|v1|
|-|-|
|`no-ripple`||
|`repeat-timeout`||
|`wait-for-ripple`||
||`ripple`|
||`stack`|
||`stretch`|
||`unelevated`|
**Events**
|v0.17|v1|
|-|-|
|`@click`||
### QBtnDropdown
- Type of `align` was changed from `string` to `any`
- Type of `tabindex` was changed from `number` to `number|string`
**Properties**
|v0.17|v1|
|-|-|
|`dark-percentage`||
|`no-ripple`||
|`percentage`||
|`popover-anchor`||
|`popover-self`||
|`repeat-timeout`||
|`wait-for-ripple`||
||`auto-close`|
||`cover`|
||`menu-anchor`|
||`menu-self`|
||`persistent`|
||`ripple`|
||`stack`|
||`stretch`|
||`unelevated`|
||`value`|
**Events**
|v0.17|v1|
|-|-|
|`@click()`|`@click(evt)`|
||`@before-hide(evt)`|
||`@before-show(evt)`|
||`@hide(evt)`|
||`@input(value)`|
||`@show(evt)`|
**Methods**
|v0.17|v1|
|-|-|
||`hide(evt)`|
||`show(evt)`|
||`toggle(evt)`|
### QBtnGroup
**Properties**
|v0.17|v1|
|-|-|
||`glossy`|
||`stretch`|
||`unelevated`|
**Events**
|v0.17|v1|
|-|-|
|`@input()`|`@input(value)`|
### QBtnToggle
**Properties**
|v0.17|v1|
|-|-|
|`no-ripple`||
|`wait-for-ripple`||
||`ripple`|
||`stack`|
||`stretch`|
||`value`|
||`unelevated`|
### QCard
**Properties**
|v0.17|v1|
|-|-|
|`color`||
|`inline`||
|`text-color`||
||`bordered`|
### QCardTitle
- **removed**, use slot of `QCard`
### QCardMain
- **removed**, use slot of `QCard`
### QCardMedia
- **removed**, use slot of `QCard`
### QCardSeparator
- **removed**, use `QSeparator`
### QCarousel
- Type of `thumbnails` was changed from `array` to `boolean`
**Properties**
|v0.17|v1|
|-|-|
|`animation`||
|`color`||
|`easing`||
|`handle-arrow-keys`||
|`no-swipe`||
|`quick-nav`||
|`quick-nav-icon`||
|`quick-nav-position`||
|`swipe-easing`||
|`thumbnails-horizontal`||
|`thumbnails-icon`||
||`animated`|
||`control-color`|
||`navigation`|
||`navigation-icon`|
||`next-icon`|
||`padding`|
||`prev-icon`|
||`swipeable`|
||`transition-next`|
||`transition-prev`|
||`value`|
**Events**
|v0.17|v1|
|-|-|
|`@input(index)`|`@input(value)`|
|`@slide`||
|`@slide-trigger`||
||`@before-transition`|
||`transition`|
**Methods**
|v0.17|v1|
|-|-|
|`goToSlide(slideNum)`|`goTo(panelName)`|
### QCarouselControl
- Type of `offset` was changed from `array of 2 numbers` to `array`
### QCarouselSlide
**Properties**
|v0.17|v1|
|-|-|
||`disable`|
||`name`|
### QChatMessage
- Type of `size` was changed from `array` to `string`
- Type of `text` was changed from `array` to `string`
### QCheckbox
- Type of `val` was changed from `object` to `any`
**Properties**
|v0.17|v1|
|-|-|
|`checked-icon`||
|`indeterminate-icon`||
|`no-focus`||
|`readonly`||
|`unchecked-icon`||
||`dense`|
||`tabindex`|
||`value`|
**Events**
|v0.17|v1|
|-|-|
|`@blur()`||
|`@focus()`||
|`@input()`|`@input(value)`|
**Methods**
|v0.17|v1|
|-|-|
||`toggle()`|
### QChip
**Properties**
|v0.17|v1|
|-|-|
|`avatar`||
|`closable`||
|`detail`||
|`floating`||
|`pointing`||
|`small`||
|`tag`||
||`clickable`|
||`disable`|
||`label`|
||`outline`|
||`removable`|
||`ripple`|
||`selected`|
||`tabindex`|
||`value`|
**Events**
|v0.17|v1|
|-|-|
|`@click()`|`@click(evt)`|
|`@focus()`||
|`@hide()`||
||`@update:selected(state)`|
||`@remove(state)`|
### QColorPicker
- **removed**, use `QColor`
- Type of `default-value` was changed from `string|object` to `string`
**Properties**
|v0.17|v1|
|-|-|
|`after`||
|`align`||
|`before`||
|`cancel-label`||
|`clear-value`||
|`clearable`||
|`color`||
|`display-value`||
|`error`||
|`float-label`||
|`hide-underline`||
|`inverted`||
|`inverted-light`||
|`modal`||
|`no-parent-value`||
|`ok-label`||
|`placeholder`||
|`popover`||
|`prefix`||
|`stack-label`||
|`suffix`||
|`warning`||
**Events**
|v0.17|v1|
|-|-|
|`@change(newVal)`|`@change(value)`|
|`@input(newVal)`|`@input(value)`|
|`@blur()`||
|`@clear(clearVal)`||
|`@focus()`||
**Methods**
|v0.17|v1|
|-|-|
|`clear()`||
|`hide()`||
|`show()`||
|`toggle()`||
### QCollapsible
- **removed**, use `QExpansionItem`
### QContextMenu
- **removed**, use `QMenu`
### QDatePicker
- **removed**, use `QDate`
### QDatetime
- **removed**, use `QDate` and `QTime`
### QDatetimePicker
- **removed**, use `QDate` and `QTime`
### QDialog
**Properties**
|v0.17|v1|
|-|-|
|`cancel`||
|`color`||
|`ok`||
|`message`||
|`options`||
|`prevent-close`||
|`prompt`||
|`no-backdrop-dismiss`||
|`no-esc-dismiss`||
|`stack-buttons`||
|`title`||
||`content-class`|
||`content-style`|
||`full-height`|
||`full-width`|
||`maximized`|
||`no-esc-key`|
||`persistent`|
||`seamless`|
||`transition-hide`|
||`transition-show`|
**Events**
|v0.17|v1|
|-|-|
|`@ok()`||
|`@cancel()`||
|`@hide()`||
|`@show()`||
||`@before-hide`|
||`@before-show`|
||`@shake`|
**Methods**
|v0.17|v1|
|-|-|
||`hide(evt)`|
||`show(evt)`|
||`toggle(evt)`|
### QEditor
**Methods**
|v0.17|v1|
|-|-|
||`exitFullscreen()`|
||`focus()`|
||`getContentEl()`|
||`refreshToolbar()`|
||`runCmd(cmd, param, update)`|
||`setFullscreen()`|
||`toggleFullscreen()`|
### QFab (Floating Action Button)
**Events**
|v0.17|v1|
|-|-|
|`@hide()`||
|`@show()`||
||`@before-hide(evt)`|
||`@before-show(evt)`|
**Methods**
|v0.17|v1|
|-|-|
|`hide()`|`hide(evt)`|
|`toggle()`|`toggle(evt)|
|`show()`|`show(evt)`|
**Slots**
|v0.17|v1|
|-|-|
||`tooltip`|
### QFabAction
**Events**
|v0.17|v1|
|-|-|
|`@click()`|`@click(evt)`|
### QField
- **removed**, the functionality of QField is now built into QInput and QSelect.
### QInfiniteScroll
**Properties**
|v0.17|v1|
|-|-|
|`handler`||
|`inline`||
### QIcon
**Properties**
|v0.17|v1|
|-|-|
||`left`|
||`right`|
### QInfiniteScroll
**Properties**
|v0.17|v1|
|-|-|
|`handler`||
|`inline`||
||`disable`|
**Events**
|v0.17|v1|
|-|-|
||`@load(index, done)`|
**Methods**
|v0.17|v1|
|-|-|
|`loadMore()`||
||`trigger`|
||`updateScrollTarget`|
### QInnerLoading
- Type of `size` was changed from `string|number` to `string`
**Properties**
|v0.17|v1|
|-|-|
|`visible`||
||`showing`|
||`transition-hide`|
||`transition-show`|
### QInput
- Type of `stack-label` was changed from `string` to `boolean`
- Type of `autofocus` was changed from `boolean|string` to `boolean`
**Properties**
|v0.17|v1|
|-|-|
|`after`||
|`align`||
|`before`||
|`clear-value`||
|`clearable`||
|`decimals`||
|`float-label`||
|`hide-underline`||
|`initial-show-password`||
|`inverted`||
|`inverted-light`||
|`loading`||
|`lower-case`||
|`max-height`||
|`no-parent-field`||
|`no-pass-toggle`||
|`numeric-keyboard-toggle`||
|`step`||
|`upper-case`||
|`warning`||
||`autogrow`|
||`bg-color`|
||`borderless`|
||`bottom-slots`|
||`counter`|
||`debounce`|
||`dense`|
||`error-message`|
||`fill-mask`|
||`filled`|
||`hide-hint`|
||`hint`|
||`input-class`|
||`input-style`|
||`items-aligned`|
||`label`|
||`lazy-rules`|
||`mask`|
||`maxlength`|
||`outlined`|
||`rounded`|
||`rules`|
||`square`|
||`standout`|
||`unmasked-value`|
**Events**
|v0.17|v1|
|-|-|
|`@blur()`|`@blur(evt)`|
|`@change(newVal)`||
|`@clear(newVal)`||
|`@click()`||
|`@focus()`|`@focus(evt)`|
|`@keydown()`||
|`@keyup()`||
|`@paste()`||
**Methods**
|v0.17|v1|
|-|-|
|`blur()`||
|`clear()`||
|`select()`||
|`togglePass()`||
||`resetValidation()`|
||`validate(value)`|
### QItem
**Properties**
|v0.17|v1|
|-|-|
|`event`||
|`highlight`||
|`inset-separator`||
|`link`||
|`multiline`||
|`separator`||
|`sparse`||
||`clickable`|
||`disbaled`|
||`focused`|
||`inset-level`|
||`manual-focus`|
||`tabindex`|
**Events**
|v0.17|v1|
|-|-|
||`@click(evt)`|
||`@keyup(evt)`|
### QItemMain
- **removed**, use `QItemLabel`
### QItemSeparator
- **removed**, use `QSeparator`
### QItemSide
- **removed**, use `QItemSection`
### QItemTile
- **removed**, use `QItemSection`
- `QItemTile` with `label` property, use `QItemLabel` with `header` property
- `QItemTile` with `sublabel` property, use `QItemLabel` with `caption` property
### QJumbotron
- **removed**, use `QCard`
### QKnob
**Properties**
|v0.17|v1|
|-|-|
|`decimals`||
|`line-width`||
||`angle`|
||`center-color`|
||`font-size`|
||`show-value`|
||`tabindex`|
||`thickness`|
### QLayout
**Properties**
|v0.17|v1|
|-|-|
|`@resize()`|`@resize(size)`|
|`@scroll()`|`@scroll(details)`|
|`@scrollHeight()`|`@scroll-height(height)`|
### QLayoutDrawer
- **renamed** to **QDrawer**
**Properties**
|v0.17|v1|
|-|-|
|`no-hide-on-route-change`||
||`bordered`|
||`elevated`|
**Methods**
|v0.17|v1|
|-|-|
|`on-layout`||
||`hide`|
||`show`|
||`toggle`|
### QLayoutHeader & QLayoutFooter
- **renamed** to **QHeader** and **QFooter**, respectively
**Properties**
|v0.17|v1|
|-|-|
||`bordered`|
||`elevated`|
### QList
**Properties**
|v0.17|v1|
|-|-|
|`highlight`||
|`inset-separator`||
|`link`||
|`no-border`||
|`sparse`||
|`striped`||
|`striped-odd`||
### QListHeader
- **removed**, use `QItemLabel` with `header` property
### QModal
- **removed**, use `QDialog`
### QModalLayout
- **removed**, use `QDialog` with a `QLayout` container
### QOptionGroup
**Properties**
|v0.17|v1|
|-|-|
|`no-parent-group`||
|`readonly`||
### QPagination
**Events**
|v0.17|v1|
|-|-|
|`@change`|`@event`|
### QPopover
- **removed**, use `QMenu`
### QPopupEdit
**Properties**
|v0.17|v1|
|-|-|
|`keep-on-screen`||
### QProgress
- **removed**, use `QCircularProgress` or `QLinearProgress`
### QPullToRefresh
**Properties**
|v0.17|v1|
|-|-|
|`handler`|use `refresh` event|
|`distance`||
|`inline`||
|`pull-message`||
|`release-message`||
|`refresh-icon`||
|`refresh-message`||
### QRadio
**Properties**
|v0.17|v1|
|-|-|
|`checked-icon`||
|`no-focus`||
|`readonly`||
|`unchecked-icon`||
### QRange
**Properties**
|v0.17|v1|
|-|-|
|`decimals`||
|`error`||
|`fill-handle-always`||
|`left-label-value`||
|`square`||
|`right-label-value`||
|`warning`||
### QRating
- Type of `max` was changed from `numbert` to `string|number`
### QResizeObservable
- **renamed** to **QResizeObserver**
**Methods**
|v0.17|v1|
|-|-|
||`trigger`|
### QRouteTab
- Type of `name` was changed from `string` to `string|number`
- Type of `alert` was changed from `boolean` to `boolean|string`
- Type of `label` was changed from `string` to `string|number`
- Type of `tabindex` was changed from `number` to `string`
- Type of `to` was changed from `string|object` to `any`
**Properties**
|v0.17|v1|
|-|-|
|`color`||
|`count`||
|`event`||
|`hidden`||
|`hide`||
### QScrollArea
- Type of `delay` was changed from `number` to `string|number`
### QScrollObservable
- **removed**, use `QScrollObserver`
### QSearch
- **removed**, use `QInput` with `debounce` property (and optionally some icons on `append` or `prepend` slots)
### QSelect
- Type of `stack-label` was changed from `string` to `string|number`
- Type of `display-value` was changed from `string` to `string|number`
**Properties**
|v0.17|v1|
|-|-|
|`after`||
|`before`||
|`chips`||
|`chips-bg-color`||
|`chips-color`||
|`clear-value`||
|`clearable`||
|`filter`||
|`filter-placeholder`||
|`float-label`||
|`hide-underline`||
|`inverted`||
|`inverted-light`||
|`no-parent-field`||
|`popup-cover`||
|`popup-max-height`||
|`radio`||
|`separator`||
|`toggle`||
|`warning`||
### QSlider
**Properties**
|v0.17|v1|
|-|-|
|`decimals`||
|`error`||
|`fill-handle-always`||
|`label-value`||
|`square`||
|`warning`||
### QSpinnerMat
- **removed**, use `QSpinner`
### QStep
- Type of `name` was changed from `string|number` to `any`
**Properties**
|v0.17|v1|
|-|-|
|`default`||
|`order`||
|`subtitle`||
### QStepper
- Type of `done-icon` was changed from `boolean` to `string`
- Type of `active-icon` was changed from `boolean` to `string`
- Type of `error-icon` was changed from `boolean` to `string`
**Properties**
|v0.17|v1|
|-|-|
|`color`||
|`contractable`||
|`no-header-navigation`||
### QTab
- Type of `name` was changed from `string` to `string|number`
- Type of `alert` was changed from `boolean` to `boolean|string`
- Type of `label` was changed from `string` to `string|number`
- Type of `tabindex` was changed from `number` to `string`
**Properties**
|v0.17|v1|
|-|-|
|`color`||
|`count`||
|`default`||
|`hidden`||
|`hide`||
**Slots**
|v0.17|v1|
|-|-|
|`title`||
### QTableColumns
- **removed**, use `QTable`
### QTabPane
- **removed**, use `QTabPanels` with `QTabPanel`
### QTabs
**Properties**
|v0.17|v1|
|-|-|
|`animated`||
|`color`||
|`glossy`||
|`inverted`||
|`panes-container-class`||
|`position`||
|`swipeable`||
|`text-color`||
|`two-lines`||
|`underline-color`||
### QTimeline
**Properties**
|v0.17|v1|
|-|-|
|`no-hover`||
|`responsive`||
### QTimePicker
- **removed**, use `QTime`
### QToggle
**Properties**
|v0.17|v1|
|-|-|
|`no-focus`||
|`readonly`||
### QToolbar
**Properties**
|v0.17|v1|
|-|-|
|`color`||
|`glossy`||
|`inverted`||
|`text-color`||
### QTooltip
**Properties**
|v0.17|v1|
|-|-|
|`disabled`||
### QUploader
- Type of `headers` was changed from `object` to `function|array`
- Type of `url` was changed from `string` to `function|string`
- Type of `method` was changed from `string` to `function|string`
**Properties**
|v0.17|v1|
|-|-|
|`additional-fields`|`fields`|
|`after`||
|`align`||
|`auto-expand`||
|`before`||
|`clear-value`||
|`clearable`||
|`error`||
|`expand-style`||
|`extensions`||
|`float-label`||
|`hide-underline`||
|`hide-upload-button`||
|`hide-upload-progress`||
|`inverted`||
|`inverted-light`||
|`name`||
|`no-content-type`||
|`no-parent-field`||
|`placeholder`||
|`prefix`||
|`send-raw`||
|`stack-label`||
|`suffix`||
|`upload-factory`||
|`url-factory`||
|`warning`||
|`with-credentials`||
### QWindowResizeObservable
- **removed**, use `this.$q.screen.width` and `this.$q.screen.height`
Sign in with Wallet
Connect another wallet