Official ESLint plugin for Quasar
Package: eslint-plugin-quasar
Created by: quasarframework
Last modified: Sun, 01 May 2022 16:47:23 GMT
Version: 1.1.0
License: MIT
Downloads: 17,598
Repository: https://github.com/quasarframework/eslint-plugin-quasar
Install
npm install eslint-plugin-quasar
yarn add eslint-plugin-quasar
eslint-plugin-quasar
Currently, in this phase of development, eslint-plugin-quasar is concentrating on helping to convert legacy Quasar v0.17+ to v1 Quasar ONLY.
Starting with 1.0.0-alpha.10, eslint-plugin-quasar now supports v1+ with the
quasar/no-invalid-propsrule. More information below...
** The rule
quasar/check-valid-propshas been deprecated. Use the rulequasar/no-invalid-propsinstead.
Help us test this plugin. If you see any issues, please file an issue.
Also, expect more to come. We have plans for even more Quasar support to help streamline your development efforts.
Install
Prerequisites: Node.js (>=8.10), npm (>=5.6.0), yarn (>=1.6.0)
$ yarn add --dev eslint-plugin-quasar
# or
$ npm install --save-dev eslint-plugin-quasar
Usage
The following changes need to be made to your .eslintrc.js configuration file.
Modification to the plugins section:
{
"plugins": [
"quasar"
]
}
v.17
Modification to the extends section:
{
"extends": [
"plugin:quasar/legacy"
]
}
Modification to the rules section:
{
"rules": [
'quasar/no-legacy-components': "error",
'quasar/no-legacy-css': "error",
'quasar/no-legacy-directives': "error",
'quasar/no-legacy-properties': "error",
'quasar/no-legacy-plugins': "error"
]
}
v1+
Modification to the extends section (for v1+):
{
"extends": [
"plugin:quasar/standard"
]
}
Modification to the rules section:
{
"rules": [
'quasar/no-invalid-props': "error",
'quasar/no-invalid-qfield-usage': "error"
]
}
Turning on the Rules
The number zero (0) above tells eslint to turn off the rule. To turn it on use the following numbers:
- 1 - display output as a warning
- 2 - display output as an error
Alternatively, you can use 'off', 'warn' or 'error' instead of the number values.
Make sure you save the configuration file.
A Note About ESLint
If you have eslint installed globally, then your eslint plugins must also be installed globally. For better control, it is best to install eslint locally and your plugins locally with it.
Testing
To test your eslint configuration against your legacy Quasar project, run this from the command-line:
./node_modules/eslint/bin/eslint.js src/**
Results
You may see results that look like this (for v.17):
/home/me/my-project/src/pages/About.vue
5:9 error 'q-card-title' has been replaced with 'q-card-section'
quasar/no-legacy-components
8:9 error 'q-card-separator' has been replaced with 'q-separator'
quasar/no-legacy-components
9:9 error 'q-card-main' has been replaced with 'q-card-section'
quasar/no-legacy-components
/home/me/my-project/src/pages/Archive.vue
3:5 error 'q-window-resize-observable' has been
removed quasar/no-legacy-components
12:17 error 'q-resize-observable' has been replaced with
'q-resize-observer' quasar/no-legacy-components
32:17 error 'q-progress' has been replaced with
'q-linear-progress' quasar/no-legacy-components
67:17 error 'q-progress' has been replaced with
'q-linear-progress' quasar/no-legacy-components
82:11 error 'q-progress' has been replaced with
'q-linear-progress' quasar/no-legacy-components
145:9 error 'q-resize-observable' has been replaced with
'q-resize-observer' quasar/no-legacy-components
261:19 error 'q-popover' has been replaced with
'q-menu' quasar/no-legacy-components
265:23 error 'q-list-header' has been replaced with
'q-item-label' quasar/no-legacy-components
266:23 error 'q-item-separator' has been replaced with
'q-separator' quasar/no-legacy-components
330:19 error 'q-datetime' has been replaced with 'q-date,
q-time' quasar/no-legacy-components
...
✖ 89 problems (89 errors, 0 warnings)
Fixing Issues
Currently, eslint-plugin-quasar can fix some issues for you (for v0.17), but not all. To do this, you have to use the --fix command-line option with eslint.
What will be fixed are any legacy css class usage to be converted to the new name as per the Quasar Docs Upgrade Guide. As well, it can also fix any legacy directive name changes as per the Quasar Docs Upgrade Guide.
Also, it should be noted that eslint-plugin-quasar currently has no support for legacy QField and as such, this should be a manual process.
Tests
If you are interested in the output of the testing, you can view the results below (for v.17 and v1.+):
$ yarn mocha tests --recursive
yarn run v1.22.4
$ .../eslint-plugin-quasar/node_modules/.bin/mocha tests --recursive
check-valid-props
valid
✓ <template>
<div class="q-pa-md q-gutter-md" style="font-size: 36px">
<q-icon name="settings_remote" class="text-brown cursor-pointer">
<q-popup-proxy transition-show="flip-up" transition-hide="flip-down">
<q-banner class="bg-brown text-white">
<template v-slot:avatar>
<q-icon name="signal_wifi_off" />
</template>
You have lost connection to the internet. This app is offline.
</q-banner>
</q-popup-proxy>
</q-icon>
<q-icon name="perm_data_setting" class="text-purple cursor-pointer">
<q-popup-proxy :offset="[10, 10]">
<q-banner class="bg-purple text-white">
<template v-slot:avatar>
<q-icon name="signal_wifi_off" />
</template>
You have lost connection to the internet. This app is offline.
</q-banner>
</q-popup-proxy>
</q-icon>
</div>
</template>
(107ms)
✓ <template>
<div class="q-pa-md">
<q-input filled v-model="input" mask="date" :rules="['date']">
<template v-slot:append>
<q-icon name="event" class="cursor-pointer">
<q-popup-proxy :breakpoint="600">
<q-date v-model="input" />
</q-popup-proxy>
</q-icon>
</template>
</q-input>
</div>
</template>
✓ <template>
<div class="q-pa-md">
<q-btn push color="purple" label="Handles right-click">
<q-popup-proxy context-menu>
<q-banner>
<template v-slot:avatar>
<q-icon name="signal_wifi_off" color="primary" />
</template>
You have lost connection to the internet. This app is offline.
</q-banner>
</q-popup-proxy>
</q-btn>
</div>
</template>
✓ <template><q-btn flat color="primary" :label="Flat" @click="onClick" /></template>
✓ <template><q-btn class="glossy" round color="deep-orange" icon="local_activity" /></template>
✓ <template><q-btn dense color="primary" :size="size" :label="`Size xl`" /></template>
✓ <template><q-btn type="submit" :loading="submitting" label="Save" class="q-mt-md" color="teal"><template v-slot:loading><q-spinner-facebook /></template></q-btn></template>
✓ <template><q-popup-proxy transition-show="scale"></q-popup-proxy></template>
✓ <template>
<div class="q-pa-md" style="max-width: 350px">
<q-list ref="list">
<q-expansion-item popup default-opened icon="mail" label="Inbox" caption="5 unread emails">
<q-separator />
<q-card>
<q-card-section>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, eius reprehenderit eos corrupti
commodi magni quaerat ex numquam, dolorum officiis modi facere maiores architecto suscipit iste
eveniet doloribus ullam aliquid.
</q-card-section>
</q-card>
</q-expansion-item>
<q-expansion-item popup icon="send" label="Outbox" caption="Empty">
<q-separator />
<q-card>
<q-card-section>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, eius reprehenderit eos corrupti
commodi magni quaerat ex numquam, dolorum officiis modi facere maiores architecto suscipit iste
eveniet doloribus ullam aliquid.
</q-card-section>
</q-card>
</q-expansion-item>
<q-expansion-item popup icon="drafts" label="Draft" caption="Draft a new email">
<q-separator />
<q-card>
<q-card-section>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, eius reprehenderit eos corrupti
commodi magni quaerat ex numquam, dolorum officiis modi facere maiores architecto suscipit iste
eveniet doloribus ullam aliquid.
</q-card-section>
</q-card>
</q-expansion-item>
</q-list>
</div>
</template>
✓ <template>
<div class="q-pa-md row items-start q-gutter-md">
<q-card class="my-card">
<q-card-section>
{{ lorem }}
</q-card-section>
</q-card>
<q-card
class="my-card text-white" style="background: radial-gradient(circle, #35a2ff 0%, #014a88 100%)"
>
<q-card-section>
<div class="text-h6">Our Changing Planet</div>
<div class="text-subtitle2">by John Doe</div>
</q-card-section>
<q-card-section>
{{ lorem }}
</q-card-section>
</q-card>
<q-card dark bordered class="bg-grey-9 my-card">
<q-card-section>
<div class="text-h6">Our Changing Planet</div>
<div class="text-subtitle2">by John Doe</div>
</q-card-section>
<q-separator dark inset />
<q-card-section>
{{ lorem }}
</q-card-section>
</q-card>
<q-card flat bordered class="my-card">
<q-card-section>
<div class="text-h6">Our Changing Planet</div>
</q-card-section>
<q-card-section>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</q-card-section>
<q-separator inset />
<q-card-section>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</q-card-section>
</q-card>
</div>
</template>
invalid
✓ <template><q-btn flat color="primary" label="Flat" boo-boo /></template>
✓ <template><q-btn class="glossy" round color="deep-orange" icon="local_activity" bad-prop="nothing" /></template>
✓ <template><q-btn dense color="primary" :size="size" :label="`Size xl`" :invalid-prop="invalid" /></template>
✓ <template><q-btn type="submit" :loading="submitting" label="Save" class="q-mt-md" color="teal" :wrong="wrong"><template v-slot:loading><q-spinner-facebook /></template></q-btn></template>
no-invalid-props
valid
✓ <template>
<div class="q-pa-md q-gutter-md" style="font-size: 36px">
<q-icon name="settings_remote" class="text-brown cursor-pointer">
<q-popup-proxy transition-show="flip-up" transition-hide="flip-down">
<q-banner class="bg-brown text-white">
<template v-slot:avatar>
<q-icon name="signal_wifi_off" />
</template>
You have lost connection to the internet. This app is offline.
</q-banner>
</q-popup-proxy>
</q-icon>
<q-icon name="perm_data_setting" class="text-purple cursor-pointer">
<q-popup-proxy :offset="[10, 10]">
<q-banner class="bg-purple text-white">
<template v-slot:avatar>
<q-icon name="signal_wifi_off" />
</template>
You have lost connection to the internet. This app is offline.
</q-banner>
</q-popup-proxy>
</q-icon>
</div>
</template>
✓ <template>
<div class="q-pa-md">
<q-input filled v-model="input" mask="date" :rules="['date']">
<template v-slot:append>
<q-icon name="event" class="cursor-pointer">
<q-popup-proxy :breakpoint="600">
<q-date v-model="input" />
</q-popup-proxy>
</q-icon>
</template>
</q-input>
</div>
</template>
✓ <template>
<div class="q-pa-md">
<q-btn push color="purple" label="Handles right-click">
<q-popup-proxy context-menu>
<q-banner>
<template v-slot:avatar>
<q-icon name="signal_wifi_off" color="primary" />
</template>
You have lost connection to the internet. This app is offline.
</q-banner>
</q-popup-proxy>
</q-btn>
</div>
</template>
✓ <template><q-btn flat color="primary" :label="Flat" @click="onClick" /></template>
✓ <template><q-btn class="glossy" round color="deep-orange" icon="local_activity" /></template>
✓ <template><q-btn dense color="primary" :size="size" :label="`Size xl`" /></template>
✓ <template><q-btn type="submit" :loading="submitting" label="Save" class="q-mt-md" color="teal"><template v-slot:loading><q-spinner-facebook /></template></q-btn></template>
✓ <template><q-popup-proxy transition-show="scale"></q-popup-proxy></template>
✓ <template>
<div class="q-pa-md" style="max-width: 350px">
<q-list ref="list">
<q-expansion-item popup default-opened icon="mail" label="Inbox" caption="5 unread emails">
<q-separator />
<q-card>
<q-card-section>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, eius reprehenderit eos corrupti
commodi magni quaerat ex numquam, dolorum officiis modi facere maiores architecto suscipit iste
eveniet doloribus ullam aliquid.
</q-card-section>
</q-card>
</q-expansion-item>
<q-expansion-item popup icon="send" label="Outbox" caption="Empty">
<q-separator />
<q-card>
<q-card-section>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, eius reprehenderit eos corrupti
commodi magni quaerat ex numquam, dolorum officiis modi facere maiores architecto suscipit iste
eveniet doloribus ullam aliquid.
</q-card-section>
</q-card>
</q-expansion-item>
<q-expansion-item popup icon="drafts" label="Draft" caption="Draft a new email">
<q-separator />
<q-card>
<q-card-section>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, eius reprehenderit eos corrupti
commodi magni quaerat ex numquam, dolorum officiis modi facere maiores architecto suscipit iste
eveniet doloribus ullam aliquid.
</q-card-section>
</q-card>
</q-expansion-item>
</q-list>
</div>
</template>
✓ <template>
<div class="q-pa-md row items-start q-gutter-md">
<q-card class="my-card">
<q-card-section>
{{ lorem }}
</q-card-section>
</q-card>
<q-card
class="my-card text-white" style="background: radial-gradient(circle, #35a2ff 0%, #014a88 100%)"
>
<q-card-section>
<div class="text-h6">Our Changing Planet</div>
<div class="text-subtitle2">by John Doe</div>
</q-card-section>
<q-card-section>
{{ lorem }}
</q-card-section>
</q-card>
<q-card dark bordered class="bg-grey-9 my-card">
<q-card-section>
<div class="text-h6">Our Changing Planet</div>
<div class="text-subtitle2">by John Doe</div>
</q-card-section>
<q-separator dark inset />
<q-card-section>
{{ lorem }}
</q-card-section>
</q-card>
<q-card flat bordered class="my-card">
<q-card-section>
<div class="text-h6">Our Changing Planet</div>
</q-card-section>
<q-card-section>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</q-card-section>
<q-separator inset />
<q-card-section>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</q-card-section>
</q-card>
</div>
</template>
invalid
✓ <template><q-btn flat color="primary" label="Flat" boo-boo /></template>
✓ <template><q-btn class="glossy" round color="deep-orange" icon="local_activity" bad-prop="nothing" /></template>
✓ <template><q-btn dense color="primary" :size="size" :label="`Size xl`" :invalid-prop="invalid" /></template>
✓ <template><q-btn type="submit" :loading="submitting" label="Save" class="q-mt-md" color="teal" :wrong="wrong"><template v-slot:loading><q-spinner-facebook /></template></q-btn></template>
no-invalid-qfield-usage
valid
✓ <template><q-field label="Standard" stack-label><template v-slot:control><div class="self-center full-width no-outline" tabindex="0">Field content</div></template></q-field></template>
invalid
✓ <template><q-field label="Standard" stack-label><q-select></q-select></q-field></template>
✓ <template><q-field label="Standard" stack-label><q-input></q-input></q-field></template>
no-legacy-components
valid
✓ <template><q-ajax-bar></q-ajax-bar></template>
✓ <template><q-avatar></q-avatar></template>
✓ <template><q-badge></q-badge></template>
✓ <template><q-banner></q-banner></template>
✓ <template><q-bar></q-bar></template>
✓ <template><q-breadcrumbs></q-breadcrumbs></template>
✓ <template><q-breadcrumbs-el></q-breadcrumbs-el></template>
✓ <template><q-btn></q-btn></template>
✓ <template><q-btn-dropdown></q-btn-dropdown></template>
✓ <template><q-btn-group></q-btn-group></template>
✓ <template><q-btn-toggle></q-btn-toggle></template>
✓ <template><q-card></q-card></template>
✓ <template><q-card-actions></q-card-actions></template>
✓ <template><q-card-section></q-card-section></template>
✓ <template><q-carousel></q-carousel></template>
✓ <template><q-carousel-constrol></q-carousel-constrol></template>
✓ <template><q-carousel-slide></q-carousel-slide></template>
✓ <template><q-chat-message></q-chat-message></template>
✓ <template><q-checkbox></q-checkbox></template>
✓ <template><q-chip></q-chip></template>
✓ <template><q-circular-progress></q-circular-progress></template>
✓ <template><q-color></q-color></template>
✓ <template><q-date></q-date></template>
✓ <template><q-dialog></q-dialog></template>
✓ <template><q-drawer></q-drawer></template>
✓ <template><q-editor></q-editor></template>
✓ <template><q-expansion-item></q-expansion-item></template>
✓ <template><q-fab></q-fab></template>
✓ <template><q-field></q-field></template>
✓ <template><q-file></q-file></template>
✓ <template><q-footer></q-footer></template>
✓ <template><q-form></q-form></template>
✓ <template><q-header></q-header></template>
✓ <template><q-icon></q-icon></template>
✓ <template><q-img></q-img></template>
✓ <template><q-infinite-scroll></q-infinite-scroll></template>
✓ <template><q-inner-loading></q-inner-loading></template>
✓ <template><q-input></q-input></template>
✓ <template><q-intersection></q-intersection></template>
✓ <template><q-item></q-item></template>
✓ <template><q-item-label></q-item-label></template>
✓ <template><q-item-section></q-item-section></template>
✓ <template><q-knob></q-knob></template>
✓ <template><q-layout></q-layout></template>
✓ <template><q-linear-progress></q-linear-progress></template>
✓ <template><q-list></q-list></template>
✓ <template><q-markup-table></q-markup-table></template>
✓ <template><q-menu></q-menu></template>
✓ <template><q-no-ssr></q-no-ssr></template>
✓ <template><q-option-group></q-option-group></template>
✓ <template><q-page></q-page></template>
✓ <template><q-page-container></q-page-container></template>
✓ <template><q-page-scroller></q-page-scroller></template>
✓ <template><q-page-sticky></q-page-sticky></template>
✓ <template><q-pagination></q-pagination></template>
✓ <template><q-parallax></q-parallax></template>
✓ <template><q-popup-edit></q-popup-edit></template>
✓ <template><q-popup-proxy></q-popup-proxy></template>
✓ <template><q-pull-to-refresh></q-pull-to-refresh></template>
✓ <template><q-radio></q-radio></template>
✓ <template><q-range></q-range></template>
✓ <template><q-rating></q-rating></template>
✓ <template><q-resize-observer></q-resize-observer></template>
✓ <template><q-responsive></q-responsive></template>
✓ <template><q-route-tab></q-route-tab></template>
✓ <template><q-scroll-area></q-scroll-area></template>
✓ <template><q-scroll-observer></q-scroll-observer></template>
✓ <template><q-select></q-select></template>
✓ <template><q-separator></q-separator></template>
✓ <template><q-skeleton></q-skeleton></template>
✓ <template><q-slide-item></q-slide-item></template>
✓ <template><q-slider></q-slider></template>
✓ <template><q-slide-transition></q-slide-transition></template>
✓ <template><q-space></q-space></template>
✓ <template><q-spinner></q-spinner></template>
✓ <template><q-spinner-audio></q-spinner-audio></template>
✓ <template><q-spinner-ball></q-spinner-ball></template>
✓ <template><q-spinner-bars></q-spinner-bars></template>
✓ <template><q-spinner-comment></q-spinner-comment></template>
✓ <template><q-spinner-cube></q-spinner-cube></template>
✓ <template><q-spinner-dots></q-spinner-dots></template>
✓ <template><q-spinner-facebook></q-spinner-facebook></template>
✓ <template><q-spinner-gears></q-spinner-gears></template>
✓ <template><q-spinner-grid></q-spinner-grid></template>
✓ <template><q-spinner-hearts></q-spinner-hearts></template>
✓ <template><q-spinner-hourglass></q-spinner-hourglass></template>
✓ <template><q-spinner-infinity></q-spinner-infinity></template>
✓ <template><q-spinner-ios></q-spinner-ios></template>
✓ <template><q-spinner-oval></q-spinner-oval></template>
✓ <template><q-spinner-pie></q-spinner-pie></template>
✓ <template><q-spinner-puff></q-spinner-puff></template>
✓ <template><q-spinner-radio></q-spinner-radio></template>
✓ <template><q-spinner-rings></q-spinner-rings></template>
✓ <template><q-spinner-tail></q-spinner-tail></template>
✓ <template><q-spitter></q-spitter></template>
✓ <template><q-step></q-step></template>
✓ <template><q-stepper></q-stepper></template>
✓ <template><q-stepper-navigation></q-stepper-navigation></template>
✓ <template><q-tab></q-tab></template>
✓ <template><q-table></q-table></template>
✓ <template><q-tab-panel></q-tab-panel></template>
✓ <template><q-tab-panels></q-tab-panels></template>
✓ <template><q-tabs></q-tabs></template>
✓ <template><q-tabs></q-tabs></template>
✓ <template><q-td></q-td></template>
✓ <template><q-th></q-th></template>
✓ <template><q-timeline></q-timeline></template>
✓ <template><q-timeline-entry></q-timeline-entry></template>
✓ <template><q-toggle></q-toggle></template>
✓ <template><q-toolbar></q-toolbar></template>
✓ <template><q-toolbar-title></q-toolbar-title></template>
✓ <template><q-tooltip></q-tooltip></template>
✓ <template><q-tr></q-tr></template>
✓ <template><q-tree></q-tree></template>
✓ <template><q-uploader></q-uploader></template>
✓ <template><q-uploader-add-trigger></q-uploader-add-trigger></template>
✓ <template><q-uploader-base></q-uploader-base></template>
✓ <template><q-video></q-video></template>
✓ <template><q-virtual-scroll></q-virtual-scroll></template>
invalid
✓ <template><q-action-sheet></q-action-sheet></template>
✓ <template><q-alert></q-alert></template>
✓ <template><q-autocomplete></q-autocomplete></template>
✓ <template><q-card-title></q-card-title></template>
✓ <template><q-card-main></q-card-main></template>
✓ <template><q-card-media></q-card-media></template>
✓ <template><q-card-separator></q-card-separator></template>
✓ <template><q-chips-input></q-chips-input></template>
✓ <template><q-collapsible></q-collapsible></template>
✓ <template><q-color-picker></q-color-picker></template>
✓ <template><q-context-menu></q-context-menu></template>
✓ <template><q-date-picker></q-date-picker></template>
✓ <template><q-datetime></q-datetime></template>
✓ <template><q-item-main></q-item-main></template>
✓ <template><q-item-separator></q-item-separator></template>
✓ <template><q-item-side></q-item-side></template>
✓ <template><q-item-tile></q-item-tile></template>
✓ <template><q-jumbotron></q-jumbotron></template>
✓ <template><q-layout-drawer></q-layout-drawer></template>
✓ <template><q-layout-header></q-layout-header></template>
✓ <template><q-layout-footer></q-layout-footer></template>
✓ <template><q-list-header></q-list-header></template>
✓ <template><q-modal></q-modal></template>
✓ <template><q-modal-layout></q-modal-layout></template>
✓ <template><q-popover></q-popover></template>
✓ <template><q-progress></q-progress></template>
✓ <template><q-resize-observable></q-resize-observable></template>
✓ <template><q-scroll-observable></q-scroll-observable></template>
✓ <template><q-search></q-search></template>
✓ <template><q-spinner-mat></q-spinner-mat></template>
✓ <template><q-table-columns></q-table-columns></template>
✓ <template><q-tab-pane></q-tab-pane></template>
✓ <template><q-time-picker></q-time-picker></template>
✓ <template><q-window-resize-observable></q-window-resize-observable></template>
no-legacy-css
valid
✓ <template><div class="text-red-4"></div></template>
✓ <template><div class="rounded-borders"></div></template>
invalid
✓ <template><div class="tertiary q-display-3 q-headline quote capitalize mat-only gutter-md"></div></template>
✓ <template><div class="tertiary"></div></template>
✓ <template><div class="bg-tertiary"></div></template>
✓ <template><div class="text-tertiary"></div></template>
✓ <template><div class="q-display-4"></div></template>
✓ <template><div class="q-display-3"></div></template>
✓ <template><div class="q-display-2"></div></template>
✓ <template><div class="q-display-1"></div></template>
✓ <template><div class="q-headline"></div></template>
✓ <template><div class="q-title"></div></template>
✓ <template><div class="q-subheading"></div></template>
✓ <template><div class="q-body-1"></div></template>
✓ <template><div class="q-body-2"></div></template>
✓ <template><div class="q-caption"></div></template>
✓ <template><div class="quote"></div></template>
✓ <template><div class="capitalize"></div></template>
✓ <template><div class="lowercase"></div></template>
✓ <template><div class="uppercase"></div></template>
✓ <template><div class="highlight-and-fade"></div></template>
✓ <template><div class="mat-only"></div></template>
✓ <template><div class="ios-only"></div></template>
✓ <template><div class="mat-hide"></div></template>
✓ <template><div class="ios-hide"></div></template>
✓ <template><div class="round-borders"></div></template>
✓ <template><div class="gutter-xs"></div></template>
✓ <template><div class="gutter-sm"></div></template>
✓ <template><div class="gutter-md"></div></template>
✓ <template><div class="gutter-lg"></div></template>
✓ <template><div class="gutter-xl"></div></template>
no-legacy-directives
valid
✓ <template><div v-close-popup></div></template>
✓ <template><div v-go-back></div></template>
✓ <template><div v-intersection></div></template>
✓ <template><div v-mutation></div></template>
✓ <template><div v-ripple></div></template>
✓ <template><div v-scroll></div></template>
✓ <template><div v-scroll-fire></div></template>
✓ <template><div v-touch-hold></div></template>
✓ <template><div v-touch-pan></div></template>
✓ <template><div v-touch-repeat></div></template>
✓ <template><div v-touch-swipe></div></template>
invalid
✓ <template><div v-back-to-top></div></template>
✓ <template><div v-close-overlay></div></template>
no-legacy-plugins
valid
✓ <template>
<q-list :dense="$q.screen.lt.md">
<q-item>
<q-item-section>John Doe</q-item-section>
</q-item>
<q-item>
<q-item-section>Jane Doe</q-item-section>
</q-item>
</q-list>
</template>
export default {
computed: {
buttonColor () {
return this.$q.screen.lt.md
? 'primary'
: 'secondary'
}
}
}
invalid
✓ <template>
<q-list :dense="$q.actionSheet">
<q-item>
<q-item-section>John Doe</q-item-section>
</q-item>
<q-item>
<q-item-section>Jane Doe</q-item-section>
</q-item>
</q-list>
</template>
export default {
computed: {
buttonColor () {
return this.$q.actionSheet
? 'primary'
: 'secondary'
}
}
}
no-legacy-properties
valid
✓ <template><q-avatar color="red" text-color="white" icon="directions" /></template>
invalid
✓ <template><q-banner actions avatar color detail icon message text-color type></q-banner></template>
✓ <template><q-breadcrumbs color></q-breadcrumbs></template>
✓ <template><q-breadcrumbs-el color event></q-breadcrumbs-el></template>
✓ <template><q-btn no-ripple repeat-timeout wait-for-ripple></q-btn></template>
✓ <template><q-btn-dropdown dark-percentage no-ripple percentage popover-anchor popover-self repeat-timeout wait-for-ripple></q-btn-dropdown></template>
✓ <template><q-btn-toggle no-ripple wait-for-ripple></q-btn-toggle></template>
✓ <template><q-card color inline text-color></q-card></template>
✓ <template><q-carousel animation color easing handle-arrow-keys no-swipe quick-nav quick-nav-icon quick-nav-position swipe-easing thumbnails-horizontal thumbnails-icon></q-carousel></template>
✓ <template><q-checkbox checked-icon indeterminate-icon no-focus readonly unchecked-icon></q-checkbox></template>
✓ <template><q-chip avatar closable detail floating pointing small tag></q-chip></template>
✓ <template><q-dialog cancel color ok message options prevent-close prompt stack-buttons title></q-dialog></template>
✓ <template><q-drawer no-hide-on-route-change></q-drawer></template>
✓ <template><q-infinite-scroll handler inline></q-infinite-scroll></template>
✓ <template><q-inner-loading visible></q-inner-loading></template>
✓ <template><q-input after align before clear-value decimals float-label hide-underline initial-show-password inverted inverted-light lower-case max-height no-parent-field no-pass-toggle numeric-keyboard-toggle step upper-case warning></q-input></template>
✓ <template><q-item event highlight inset-separator link multiline separator sparse></q-item></template>
✓ <template><q-knob decimals line-width></q-knob></template>
✓ <template><q-linear-progress animate height keep-on-percentage></q-linear-progress></template>
✓ <template><q-list highlight inset-separator link no-border sparse striped striped-odd></q-list></template>
✓ <template><q-menu anchor-click disabled keep-on-screen></q-menu></template>
✓ <template><q-option-group no-parent-group readonly></q-option-group></template>
✓ <template><q-popup-edit keep-on-screen validate></q-popup-edit></template>
✓ <template><q-pull-to-refresh handler distance inline pull-message release-message refresh-icon refresh-message></q-pull-to-refresh></template>
✓ <template><q-radio checked-icon no-focus readonly unchecked-icon></q-radio></template>
✓ <template><q-range decimals error fill-handle-always square warning></q-range></template>
✓ <template><q-route-tab color count hidden hide></q-route-tab></template>
✓ <template><q-select after before chips chip-bg-color chips-color clear-value filter filter-placeholder float-label hide-underline inverted inverted-light no-parent-field popup-cover popup-max-height radio separator toggle warning></q-select></template>
✓ <template><q-slider decimals error fill-handle-always square warning></q-slider></template>
✓ <template><q-step default order subtitle></q-step></template>
✓ <template><q-stepper color contractable no-header-navigation></q-stepper></template>
✓ <template><q-tab color count default hidden hide></q-tab></template>
✓ <template><q-table selected-rows-label pagination-label></q-table></template>
✓ <template><q-tabs animated color glossy inverted panes-container-class position swipeable text-color two-line underline-color no-pane-border></q-tabs></template>
✓ <template><q-timeline no-hover responsive></q-timeline></template>
✓ <template><q-timeline-entry subtitle title></q-timeline-entry></template>
✓ <template><q-toggle no-focus readonly></q-toggle></template>
✓ <template><q-toolbar color glossy inverted shrink text-color></q-toolbar></template>
✓ <template><q-tooltip disabled></q-tooltip></template>
✓ <template><q-uploader additional-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 stack-label suffix upload-factory url-factory warning></q-uploader></template>
270 passing (678ms)
Done in 1.07s.
