{"id":19311251,"url":"https://github.com/quasarframework/eslint-plugin-quasar","last_synced_at":"2025-04-22T14:30:35.413Z","repository":{"id":57230141,"uuid":"202201097","full_name":"quasarframework/eslint-plugin-quasar","owner":"quasarframework","description":"Quasar Framework plugin for ESLint","archived":false,"fork":false,"pushed_at":"2022-01-05T14:57:03.000Z","size":563,"stargazers_count":12,"open_issues_count":1,"forks_count":3,"subscribers_count":5,"default_branch":"dev","last_synced_at":"2024-10-18T09:36:45.622Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/quasarframework.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["hawkeye64","rstoenescu"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2019-08-13T18:21:19.000Z","updated_at":"2024-05-26T23:59:19.000Z","dependencies_parsed_at":"2022-09-14T15:01:58.775Z","dependency_job_id":null,"html_url":"https://github.com/quasarframework/eslint-plugin-quasar","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quasarframework%2Feslint-plugin-quasar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quasarframework%2Feslint-plugin-quasar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quasarframework%2Feslint-plugin-quasar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quasarframework%2Feslint-plugin-quasar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/quasarframework","download_url":"https://codeload.github.com/quasarframework/eslint-plugin-quasar/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249517964,"owners_count":21284867,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-10T00:28:26.998Z","updated_at":"2025-04-22T14:30:34.052Z","avatar_url":"https://github.com/quasarframework.png","language":"JavaScript","readme":"# eslint-plugin-quasar\n\n\u003e **~~Currently, in this phase of development, eslint-plugin-quasar is concentrating on helping to convert legacy Quasar v0.17+ to v1 Quasar ONLY.~~**\n\n\u003e **Starting with 1.0.0-alpha.10, eslint-plugin-quasar now supports v1+ with the `quasar/no-invalid-props` rule.** More information below...\n\n\u003e ** The rule `quasar/check-valid-props` has been deprecated. Use the rule `quasar/no-invalid-props` instead.\n\nHelp us test this plugin. If you see any issues, please file an [issue](https://github.com/quasarframework/eslint-plugin-quasar/issues).\n\nAlso, expect more to come. We have plans for even more Quasar support to help streamline your development efforts.\n\n## Install\n\nPrerequisites: Node.js (\u003e=8.10), npm (\u003e=5.6.0), yarn (\u003e=1.6.0)\n\n```bash\n$ yarn add --dev eslint-plugin-quasar\n\n# or\n\n$ npm install --save-dev eslint-plugin-quasar\n```\n\n## Usage\n\n\nThe following changes need to be made to your `.eslintrc.js` configuration file.\n\nModification to the `plugins` section:\n```js\n{\n  \"plugins\": [\n    \"quasar\"\n  ]\n}\n```\n\n### v.17\n\nModification to  the `extends` section:\n```js\n{\n  \"extends\": [\n    \"plugin:quasar/legacy\"\n  ]\n}\n```\n\nModification to  the `rules` section:\n```js\n{\n  \"rules\": [\n    'quasar/no-legacy-components': \"error\",\n    'quasar/no-legacy-css': \"error\",\n    'quasar/no-legacy-directives': \"error\",\n    'quasar/no-legacy-properties': \"error\",\n    'quasar/no-legacy-plugins': \"error\"\n  ]\n}\n```\n\n### v1+\n\nModification to  the `extends` section (for v1+):\n```js\n{\n  \"extends\": [\n    \"plugin:quasar/standard\"\n  ]\n}\n```\n\nModification to  the `rules` section:\n```js\n{\n  \"rules\": [\n    'quasar/no-invalid-props': \"error\",\n    'quasar/no-invalid-qfield-usage': \"error\"\n  ]\n}\n```\n\n### Turning on the Rules\n\nThe number zero (0) above tells eslint to turn off the rule. To turn it on use the following numbers:\n1. 1 - display output as a warning\n2. 2 - display output as an error\n\nAlternatively, you can use 'off', 'warn' or 'error' instead of the number values.\n\nMake sure you save the configuration file.\n\n## A Note About ESLint\nIf 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.\n\n## Testing\nTo test your `eslint` configuration against your legacy Quasar project, run this from the command-line:\n```bash\n./node_modules/eslint/bin/eslint.js src/**\n```\n\n### Results\nYou may see results that look like this (for v.17):\n\n```bash\n/home/me/my-project/src/pages/About.vue\n   5:9  error  'q-card-title' has been replaced with 'q-card-section'\nquasar/no-legacy-components\n   8:9  error  'q-card-separator' has been replaced with 'q-separator'\nquasar/no-legacy-components\n   9:9  error  'q-card-main' has been replaced with 'q-card-section'\nquasar/no-legacy-components\n\n/home/me/my-project/src/pages/Archive.vue\n     3:5   error  'q-window-resize-observable' has been\nremoved                     quasar/no-legacy-components\n    12:17  error  'q-resize-observable' has been replaced with\n'q-resize-observer'  quasar/no-legacy-components\n    32:17  error  'q-progress' has been replaced with\n'q-linear-progress'           quasar/no-legacy-components\n    67:17  error  'q-progress' has been replaced with\n'q-linear-progress'           quasar/no-legacy-components\n    82:11  error  'q-progress' has been replaced with\n'q-linear-progress'           quasar/no-legacy-components\n   145:9   error  'q-resize-observable' has been replaced with\n'q-resize-observer'  quasar/no-legacy-components\n   261:19  error  'q-popover' has been replaced with\n'q-menu'                       quasar/no-legacy-components\n   265:23  error  'q-list-header' has been replaced with\n'q-item-label'             quasar/no-legacy-components\n   266:23  error  'q-item-separator' has been replaced with\n'q-separator'           quasar/no-legacy-components\n   330:19  error  'q-datetime' has been replaced with 'q-date,\nq-time'              quasar/no-legacy-components\n...\n✖ 89 problems (89 errors, 0 warnings)\n```\n\n## Fixing Issues\nCurrently, **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`.\n\nWhat will be fixed are any legacy css class usage to be converted to the new name as per the [Quasar Docs Upgrade Guide](https://quasar.dev/start/upgrade-guide#CSS). As well, it can also fix any legacy directive name changes as per the [Quasar Docs Upgrade Guide](https://quasar.dev/start/upgrade-guide#Directives).\n\nAlso, it should be noted that **eslint-plugin-quasar** currently has no support for legacy `QField` and as such, this should be a manual process.\n\n# Tests\nIf you are interested in the output of the testing, you can view the results below (for v.17 and v1.+):\n\n```\n$ yarn mocha tests --recursive\nyarn run v1.22.4\n$ .../eslint-plugin-quasar/node_modules/.bin/mocha tests --recursive\n\n\n  check-valid-props\n    valid\n      ✓ \u003ctemplate\u003e\n  \u003cdiv class=\"q-pa-md q-gutter-md\" style=\"font-size: 36px\"\u003e\n    \u003cq-icon name=\"settings_remote\" class=\"text-brown cursor-pointer\"\u003e\n      \u003cq-popup-proxy transition-show=\"flip-up\" transition-hide=\"flip-down\"\u003e\n        \u003cq-banner class=\"bg-brown text-white\"\u003e\n          \u003ctemplate v-slot:avatar\u003e\n            \u003cq-icon name=\"signal_wifi_off\" /\u003e\n          \u003c/template\u003e\n          You have lost connection to the internet. This app is offline.\n        \u003c/q-banner\u003e\n      \u003c/q-popup-proxy\u003e\n    \u003c/q-icon\u003e\n\n    \u003cq-icon name=\"perm_data_setting\" class=\"text-purple cursor-pointer\"\u003e\n      \u003cq-popup-proxy :offset=\"[10, 10]\"\u003e\n        \u003cq-banner class=\"bg-purple text-white\"\u003e\n          \u003ctemplate v-slot:avatar\u003e\n            \u003cq-icon name=\"signal_wifi_off\" /\u003e\n          \u003c/template\u003e\n          You have lost connection to the internet. This app is offline.\n        \u003c/q-banner\u003e\n      \u003c/q-popup-proxy\u003e\n    \u003c/q-icon\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n (107ms)\n      ✓ \u003ctemplate\u003e\n  \u003cdiv class=\"q-pa-md\"\u003e\n    \u003cq-input filled v-model=\"input\" mask=\"date\" :rules=\"['date']\"\u003e\n      \u003ctemplate v-slot:append\u003e\n        \u003cq-icon name=\"event\" class=\"cursor-pointer\"\u003e\n          \u003cq-popup-proxy :breakpoint=\"600\"\u003e\n            \u003cq-date v-model=\"input\" /\u003e\n          \u003c/q-popup-proxy\u003e\n        \u003c/q-icon\u003e\n      \u003c/template\u003e\n    \u003c/q-input\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n      ✓ \u003ctemplate\u003e\n  \u003cdiv class=\"q-pa-md\"\u003e\n    \u003cq-btn push color=\"purple\" label=\"Handles right-click\"\u003e\n      \u003cq-popup-proxy context-menu\u003e\n        \u003cq-banner\u003e\n          \u003ctemplate v-slot:avatar\u003e\n            \u003cq-icon name=\"signal_wifi_off\" color=\"primary\" /\u003e\n          \u003c/template\u003e\n          You have lost connection to the internet. This app is offline.\n        \u003c/q-banner\u003e\n      \u003c/q-popup-proxy\u003e\n    \u003c/q-btn\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\n      ✓ \u003ctemplate\u003e\u003cq-btn flat color=\"primary\" :label=\"Flat\" @click=\"onClick\" /\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-btn class=\"glossy\" round color=\"deep-orange\" icon=\"local_activity\" /\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-btn dense color=\"primary\" :size=\"size\" :label=\"`Size xl`\" /\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-btn type=\"submit\" :loading=\"submitting\" label=\"Save\" class=\"q-mt-md\" color=\"teal\"\u003e\u003ctemplate v-slot:loading\u003e\u003cq-spinner-facebook /\u003e\u003c/template\u003e\u003c/q-btn\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-popup-proxy transition-show=\"scale\"\u003e\u003c/q-popup-proxy\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\n  \u003cdiv class=\"q-pa-md\" style=\"max-width: 350px\"\u003e\n    \u003cq-list ref=\"list\"\u003e\n      \u003cq-expansion-item popup default-opened icon=\"mail\" label=\"Inbox\" caption=\"5 unread emails\"\u003e\n        \u003cq-separator /\u003e\n        \u003cq-card\u003e\n          \u003cq-card-section\u003e\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, eius reprehenderit eos corrupti\n            commodi magni quaerat ex numquam, dolorum officiis modi facere maiores architecto suscipit iste\n            eveniet doloribus ullam aliquid.\n          \u003c/q-card-section\u003e\n        \u003c/q-card\u003e\n      \u003c/q-expansion-item\u003e\n      \u003cq-expansion-item popup icon=\"send\" label=\"Outbox\" caption=\"Empty\"\u003e\n        \u003cq-separator /\u003e\n        \u003cq-card\u003e\n          \u003cq-card-section\u003e\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, eius reprehenderit eos corrupti\n            commodi magni quaerat ex numquam, dolorum officiis modi facere maiores architecto suscipit iste\n            eveniet doloribus ullam aliquid.\n          \u003c/q-card-section\u003e\n        \u003c/q-card\u003e\n      \u003c/q-expansion-item\u003e\n      \u003cq-expansion-item popup icon=\"drafts\" label=\"Draft\" caption=\"Draft a new email\"\u003e\n        \u003cq-separator /\u003e\n        \u003cq-card\u003e\n          \u003cq-card-section\u003e\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, eius reprehenderit eos corrupti\n            commodi magni quaerat ex numquam, dolorum officiis modi facere maiores architecto suscipit iste\n            eveniet doloribus ullam aliquid.\n          \u003c/q-card-section\u003e\n        \u003c/q-card\u003e\n      \u003c/q-expansion-item\u003e\n    \u003c/q-list\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\n  \u003cdiv class=\"q-pa-md row items-start q-gutter-md\"\u003e\n    \u003cq-card class=\"my-card\"\u003e\n      \u003cq-card-section\u003e\n        {{ lorem }}\n      \u003c/q-card-section\u003e\n    \u003c/q-card\u003e\n\n    \u003cq-card\n      class=\"my-card text-white\" style=\"background: radial-gradient(circle, #35a2ff 0%, #014a88 100%)\"\n    \u003e\n      \u003cq-card-section\u003e\n        \u003cdiv class=\"text-h6\"\u003eOur Changing Planet\u003c/div\u003e\n        \u003cdiv class=\"text-subtitle2\"\u003eby John Doe\u003c/div\u003e\n      \u003c/q-card-section\u003e\n\n      \u003cq-card-section\u003e\n        {{ lorem }}\n      \u003c/q-card-section\u003e\n    \u003c/q-card\u003e\n\n    \u003cq-card dark bordered class=\"bg-grey-9 my-card\"\u003e\n      \u003cq-card-section\u003e\n        \u003cdiv class=\"text-h6\"\u003eOur Changing Planet\u003c/div\u003e\n        \u003cdiv class=\"text-subtitle2\"\u003eby John Doe\u003c/div\u003e\n      \u003c/q-card-section\u003e\n\n      \u003cq-separator dark inset /\u003e\n\n      \u003cq-card-section\u003e\n        {{ lorem }}\n      \u003c/q-card-section\u003e\n    \u003c/q-card\u003e\n\n    \u003cq-card flat bordered class=\"my-card\"\u003e\n      \u003cq-card-section\u003e\n        \u003cdiv class=\"text-h6\"\u003eOur Changing Planet\u003c/div\u003e\n      \u003c/q-card-section\u003e\n\n      \u003cq-card-section\u003e\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod\n        tempor incididunt ut labore et dolore magna aliqua.\n      \u003c/q-card-section\u003e\n\n      \u003cq-separator inset /\u003e\n\n      \u003cq-card-section\u003e\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod\n        tempor incididunt ut labore et dolore magna aliqua.\n      \u003c/q-card-section\u003e\n    \u003c/q-card\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n    invalid\n      ✓ \u003ctemplate\u003e\u003cq-btn flat color=\"primary\" label=\"Flat\" boo-boo /\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-btn class=\"glossy\" round color=\"deep-orange\" icon=\"local_activity\" bad-prop=\"nothing\" /\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-btn dense color=\"primary\" :size=\"size\" :label=\"`Size xl`\" :invalid-prop=\"invalid\" /\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-btn type=\"submit\" :loading=\"submitting\" label=\"Save\" class=\"q-mt-md\" color=\"teal\" :wrong=\"wrong\"\u003e\u003ctemplate v-slot:loading\u003e\u003cq-spinner-facebook /\u003e\u003c/template\u003e\u003c/q-btn\u003e\u003c/template\u003e\n\n  no-invalid-props\n    valid\n      ✓ \u003ctemplate\u003e\n  \u003cdiv class=\"q-pa-md q-gutter-md\" style=\"font-size: 36px\"\u003e\n    \u003cq-icon name=\"settings_remote\" class=\"text-brown cursor-pointer\"\u003e\n      \u003cq-popup-proxy transition-show=\"flip-up\" transition-hide=\"flip-down\"\u003e\n        \u003cq-banner class=\"bg-brown text-white\"\u003e\n          \u003ctemplate v-slot:avatar\u003e\n            \u003cq-icon name=\"signal_wifi_off\" /\u003e\n          \u003c/template\u003e\n          You have lost connection to the internet. This app is offline.\n        \u003c/q-banner\u003e\n      \u003c/q-popup-proxy\u003e\n    \u003c/q-icon\u003e\n\n    \u003cq-icon name=\"perm_data_setting\" class=\"text-purple cursor-pointer\"\u003e\n      \u003cq-popup-proxy :offset=\"[10, 10]\"\u003e\n        \u003cq-banner class=\"bg-purple text-white\"\u003e\n          \u003ctemplate v-slot:avatar\u003e\n            \u003cq-icon name=\"signal_wifi_off\" /\u003e\n          \u003c/template\u003e\n          You have lost connection to the internet. This app is offline.\n        \u003c/q-banner\u003e\n      \u003c/q-popup-proxy\u003e\n    \u003c/q-icon\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n      ✓ \u003ctemplate\u003e\n  \u003cdiv class=\"q-pa-md\"\u003e\n    \u003cq-input filled v-model=\"input\" mask=\"date\" :rules=\"['date']\"\u003e\n      \u003ctemplate v-slot:append\u003e\n        \u003cq-icon name=\"event\" class=\"cursor-pointer\"\u003e\n          \u003cq-popup-proxy :breakpoint=\"600\"\u003e\n            \u003cq-date v-model=\"input\" /\u003e\n          \u003c/q-popup-proxy\u003e\n        \u003c/q-icon\u003e\n      \u003c/template\u003e\n    \u003c/q-input\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n      ✓ \u003ctemplate\u003e\n  \u003cdiv class=\"q-pa-md\"\u003e\n    \u003cq-btn push color=\"purple\" label=\"Handles right-click\"\u003e\n      \u003cq-popup-proxy context-menu\u003e\n        \u003cq-banner\u003e\n          \u003ctemplate v-slot:avatar\u003e\n            \u003cq-icon name=\"signal_wifi_off\" color=\"primary\" /\u003e\n          \u003c/template\u003e\n          You have lost connection to the internet. This app is offline.\n        \u003c/q-banner\u003e\n      \u003c/q-popup-proxy\u003e\n    \u003c/q-btn\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\n      ✓ \u003ctemplate\u003e\u003cq-btn flat color=\"primary\" :label=\"Flat\" @click=\"onClick\" /\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-btn class=\"glossy\" round color=\"deep-orange\" icon=\"local_activity\" /\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-btn dense color=\"primary\" :size=\"size\" :label=\"`Size xl`\" /\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-btn type=\"submit\" :loading=\"submitting\" label=\"Save\" class=\"q-mt-md\" color=\"teal\"\u003e\u003ctemplate v-slot:loading\u003e\u003cq-spinner-facebook /\u003e\u003c/template\u003e\u003c/q-btn\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-popup-proxy transition-show=\"scale\"\u003e\u003c/q-popup-proxy\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\n  \u003cdiv class=\"q-pa-md\" style=\"max-width: 350px\"\u003e\n    \u003cq-list ref=\"list\"\u003e\n      \u003cq-expansion-item popup default-opened icon=\"mail\" label=\"Inbox\" caption=\"5 unread emails\"\u003e\n        \u003cq-separator /\u003e\n        \u003cq-card\u003e\n          \u003cq-card-section\u003e\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, eius reprehenderit eos corrupti\n            commodi magni quaerat ex numquam, dolorum officiis modi facere maiores architecto suscipit iste\n            eveniet doloribus ullam aliquid.\n          \u003c/q-card-section\u003e\n        \u003c/q-card\u003e\n      \u003c/q-expansion-item\u003e\n      \u003cq-expansion-item popup icon=\"send\" label=\"Outbox\" caption=\"Empty\"\u003e\n        \u003cq-separator /\u003e\n        \u003cq-card\u003e\n          \u003cq-card-section\u003e\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, eius reprehenderit eos corrupti\n            commodi magni quaerat ex numquam, dolorum officiis modi facere maiores architecto suscipit iste\n            eveniet doloribus ullam aliquid.\n          \u003c/q-card-section\u003e\n        \u003c/q-card\u003e\n      \u003c/q-expansion-item\u003e\n      \u003cq-expansion-item popup icon=\"drafts\" label=\"Draft\" caption=\"Draft a new email\"\u003e\n        \u003cq-separator /\u003e\n        \u003cq-card\u003e\n          \u003cq-card-section\u003e\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, eius reprehenderit eos corrupti\n            commodi magni quaerat ex numquam, dolorum officiis modi facere maiores architecto suscipit iste\n            eveniet doloribus ullam aliquid.\n          \u003c/q-card-section\u003e\n        \u003c/q-card\u003e\n      \u003c/q-expansion-item\u003e\n    \u003c/q-list\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\n  \u003cdiv class=\"q-pa-md row items-start q-gutter-md\"\u003e\n    \u003cq-card class=\"my-card\"\u003e\n      \u003cq-card-section\u003e\n        {{ lorem }}\n      \u003c/q-card-section\u003e\n    \u003c/q-card\u003e\n\n    \u003cq-card\n      class=\"my-card text-white\" style=\"background: radial-gradient(circle, #35a2ff 0%, #014a88 100%)\"\n    \u003e\n      \u003cq-card-section\u003e\n        \u003cdiv class=\"text-h6\"\u003eOur Changing Planet\u003c/div\u003e\n        \u003cdiv class=\"text-subtitle2\"\u003eby John Doe\u003c/div\u003e\n      \u003c/q-card-section\u003e\n\n      \u003cq-card-section\u003e\n        {{ lorem }}\n      \u003c/q-card-section\u003e\n    \u003c/q-card\u003e\n\n    \u003cq-card dark bordered class=\"bg-grey-9 my-card\"\u003e\n      \u003cq-card-section\u003e\n        \u003cdiv class=\"text-h6\"\u003eOur Changing Planet\u003c/div\u003e\n        \u003cdiv class=\"text-subtitle2\"\u003eby John Doe\u003c/div\u003e\n      \u003c/q-card-section\u003e\n\n      \u003cq-separator dark inset /\u003e\n\n      \u003cq-card-section\u003e\n        {{ lorem }}\n      \u003c/q-card-section\u003e\n    \u003c/q-card\u003e\n\n    \u003cq-card flat bordered class=\"my-card\"\u003e\n      \u003cq-card-section\u003e\n        \u003cdiv class=\"text-h6\"\u003eOur Changing Planet\u003c/div\u003e\n      \u003c/q-card-section\u003e\n\n      \u003cq-card-section\u003e\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod\n        tempor incididunt ut labore et dolore magna aliqua.\n      \u003c/q-card-section\u003e\n\n      \u003cq-separator inset /\u003e\n\n      \u003cq-card-section\u003e\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod\n        tempor incididunt ut labore et dolore magna aliqua.\n      \u003c/q-card-section\u003e\n    \u003c/q-card\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n    invalid\n      ✓ \u003ctemplate\u003e\u003cq-btn flat color=\"primary\" label=\"Flat\" boo-boo /\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-btn class=\"glossy\" round color=\"deep-orange\" icon=\"local_activity\" bad-prop=\"nothing\" /\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-btn dense color=\"primary\" :size=\"size\" :label=\"`Size xl`\" :invalid-prop=\"invalid\" /\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-btn type=\"submit\" :loading=\"submitting\" label=\"Save\" class=\"q-mt-md\" color=\"teal\" :wrong=\"wrong\"\u003e\u003ctemplate v-slot:loading\u003e\u003cq-spinner-facebook /\u003e\u003c/template\u003e\u003c/q-btn\u003e\u003c/template\u003e\n\n  no-invalid-qfield-usage\n    valid\n      ✓ \u003ctemplate\u003e\u003cq-field label=\"Standard\" stack-label\u003e\u003ctemplate v-slot:control\u003e\u003cdiv class=\"self-center full-width no-outline\" tabindex=\"0\"\u003eField content\u003c/div\u003e\u003c/template\u003e\u003c/q-field\u003e\u003c/template\u003e\n    invalid\n      ✓ \u003ctemplate\u003e\u003cq-field label=\"Standard\" stack-label\u003e\u003cq-select\u003e\u003c/q-select\u003e\u003c/q-field\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-field label=\"Standard\" stack-label\u003e\u003cq-input\u003e\u003c/q-input\u003e\u003c/q-field\u003e\u003c/template\u003e\n\n  no-legacy-components\n    valid\n      ✓ \u003ctemplate\u003e\u003cq-ajax-bar\u003e\u003c/q-ajax-bar\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-avatar\u003e\u003c/q-avatar\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-badge\u003e\u003c/q-badge\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-banner\u003e\u003c/q-banner\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-bar\u003e\u003c/q-bar\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-breadcrumbs\u003e\u003c/q-breadcrumbs\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-breadcrumbs-el\u003e\u003c/q-breadcrumbs-el\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-btn\u003e\u003c/q-btn\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-btn-dropdown\u003e\u003c/q-btn-dropdown\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-btn-group\u003e\u003c/q-btn-group\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-btn-toggle\u003e\u003c/q-btn-toggle\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-card\u003e\u003c/q-card\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-card-actions\u003e\u003c/q-card-actions\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-card-section\u003e\u003c/q-card-section\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-carousel\u003e\u003c/q-carousel\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-carousel-constrol\u003e\u003c/q-carousel-constrol\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-carousel-slide\u003e\u003c/q-carousel-slide\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-chat-message\u003e\u003c/q-chat-message\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-checkbox\u003e\u003c/q-checkbox\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-chip\u003e\u003c/q-chip\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-circular-progress\u003e\u003c/q-circular-progress\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-color\u003e\u003c/q-color\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-date\u003e\u003c/q-date\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-dialog\u003e\u003c/q-dialog\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-drawer\u003e\u003c/q-drawer\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-editor\u003e\u003c/q-editor\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-expansion-item\u003e\u003c/q-expansion-item\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-fab\u003e\u003c/q-fab\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-field\u003e\u003c/q-field\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-file\u003e\u003c/q-file\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-footer\u003e\u003c/q-footer\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-form\u003e\u003c/q-form\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-header\u003e\u003c/q-header\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-icon\u003e\u003c/q-icon\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-img\u003e\u003c/q-img\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-infinite-scroll\u003e\u003c/q-infinite-scroll\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-inner-loading\u003e\u003c/q-inner-loading\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-input\u003e\u003c/q-input\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-intersection\u003e\u003c/q-intersection\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-item\u003e\u003c/q-item\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-item-label\u003e\u003c/q-item-label\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-item-section\u003e\u003c/q-item-section\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-knob\u003e\u003c/q-knob\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-layout\u003e\u003c/q-layout\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-linear-progress\u003e\u003c/q-linear-progress\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-list\u003e\u003c/q-list\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-markup-table\u003e\u003c/q-markup-table\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-menu\u003e\u003c/q-menu\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-no-ssr\u003e\u003c/q-no-ssr\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-option-group\u003e\u003c/q-option-group\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-page\u003e\u003c/q-page\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-page-container\u003e\u003c/q-page-container\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-page-scroller\u003e\u003c/q-page-scroller\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-page-sticky\u003e\u003c/q-page-sticky\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-pagination\u003e\u003c/q-pagination\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-parallax\u003e\u003c/q-parallax\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-popup-edit\u003e\u003c/q-popup-edit\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-popup-proxy\u003e\u003c/q-popup-proxy\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-pull-to-refresh\u003e\u003c/q-pull-to-refresh\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-radio\u003e\u003c/q-radio\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-range\u003e\u003c/q-range\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-rating\u003e\u003c/q-rating\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-resize-observer\u003e\u003c/q-resize-observer\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-responsive\u003e\u003c/q-responsive\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-route-tab\u003e\u003c/q-route-tab\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-scroll-area\u003e\u003c/q-scroll-area\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-scroll-observer\u003e\u003c/q-scroll-observer\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-select\u003e\u003c/q-select\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-separator\u003e\u003c/q-separator\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-skeleton\u003e\u003c/q-skeleton\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-slide-item\u003e\u003c/q-slide-item\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-slider\u003e\u003c/q-slider\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-slide-transition\u003e\u003c/q-slide-transition\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-space\u003e\u003c/q-space\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-spinner\u003e\u003c/q-spinner\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-spinner-audio\u003e\u003c/q-spinner-audio\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-spinner-ball\u003e\u003c/q-spinner-ball\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-spinner-bars\u003e\u003c/q-spinner-bars\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-spinner-comment\u003e\u003c/q-spinner-comment\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-spinner-cube\u003e\u003c/q-spinner-cube\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-spinner-dots\u003e\u003c/q-spinner-dots\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-spinner-facebook\u003e\u003c/q-spinner-facebook\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-spinner-gears\u003e\u003c/q-spinner-gears\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-spinner-grid\u003e\u003c/q-spinner-grid\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-spinner-hearts\u003e\u003c/q-spinner-hearts\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-spinner-hourglass\u003e\u003c/q-spinner-hourglass\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-spinner-infinity\u003e\u003c/q-spinner-infinity\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-spinner-ios\u003e\u003c/q-spinner-ios\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-spinner-oval\u003e\u003c/q-spinner-oval\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-spinner-pie\u003e\u003c/q-spinner-pie\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-spinner-puff\u003e\u003c/q-spinner-puff\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-spinner-radio\u003e\u003c/q-spinner-radio\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-spinner-rings\u003e\u003c/q-spinner-rings\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-spinner-tail\u003e\u003c/q-spinner-tail\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-spitter\u003e\u003c/q-spitter\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-step\u003e\u003c/q-step\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-stepper\u003e\u003c/q-stepper\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-stepper-navigation\u003e\u003c/q-stepper-navigation\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-tab\u003e\u003c/q-tab\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-table\u003e\u003c/q-table\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-tab-panel\u003e\u003c/q-tab-panel\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-tab-panels\u003e\u003c/q-tab-panels\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-tabs\u003e\u003c/q-tabs\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-tabs\u003e\u003c/q-tabs\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-td\u003e\u003c/q-td\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-th\u003e\u003c/q-th\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-timeline\u003e\u003c/q-timeline\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-timeline-entry\u003e\u003c/q-timeline-entry\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-toggle\u003e\u003c/q-toggle\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-toolbar\u003e\u003c/q-toolbar\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-toolbar-title\u003e\u003c/q-toolbar-title\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-tooltip\u003e\u003c/q-tooltip\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-tr\u003e\u003c/q-tr\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-tree\u003e\u003c/q-tree\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-uploader\u003e\u003c/q-uploader\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-uploader-add-trigger\u003e\u003c/q-uploader-add-trigger\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-uploader-base\u003e\u003c/q-uploader-base\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-video\u003e\u003c/q-video\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-virtual-scroll\u003e\u003c/q-virtual-scroll\u003e\u003c/template\u003e\n    invalid\n      ✓ \u003ctemplate\u003e\u003cq-action-sheet\u003e\u003c/q-action-sheet\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-alert\u003e\u003c/q-alert\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-autocomplete\u003e\u003c/q-autocomplete\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-card-title\u003e\u003c/q-card-title\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-card-main\u003e\u003c/q-card-main\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-card-media\u003e\u003c/q-card-media\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-card-separator\u003e\u003c/q-card-separator\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-chips-input\u003e\u003c/q-chips-input\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-collapsible\u003e\u003c/q-collapsible\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-color-picker\u003e\u003c/q-color-picker\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-context-menu\u003e\u003c/q-context-menu\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-date-picker\u003e\u003c/q-date-picker\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-datetime\u003e\u003c/q-datetime\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-item-main\u003e\u003c/q-item-main\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-item-separator\u003e\u003c/q-item-separator\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-item-side\u003e\u003c/q-item-side\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-item-tile\u003e\u003c/q-item-tile\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-jumbotron\u003e\u003c/q-jumbotron\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-layout-drawer\u003e\u003c/q-layout-drawer\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-layout-header\u003e\u003c/q-layout-header\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-layout-footer\u003e\u003c/q-layout-footer\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-list-header\u003e\u003c/q-list-header\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-modal\u003e\u003c/q-modal\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-modal-layout\u003e\u003c/q-modal-layout\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-popover\u003e\u003c/q-popover\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-progress\u003e\u003c/q-progress\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-resize-observable\u003e\u003c/q-resize-observable\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-scroll-observable\u003e\u003c/q-scroll-observable\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-search\u003e\u003c/q-search\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-spinner-mat\u003e\u003c/q-spinner-mat\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-table-columns\u003e\u003c/q-table-columns\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-tab-pane\u003e\u003c/q-tab-pane\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-time-picker\u003e\u003c/q-time-picker\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-window-resize-observable\u003e\u003c/q-window-resize-observable\u003e\u003c/template\u003e\n\n  no-legacy-css\n    valid\n      ✓ \u003ctemplate\u003e\u003cdiv class=\"text-red-4\"\u003e\u003c/div\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cdiv class=\"rounded-borders\"\u003e\u003c/div\u003e\u003c/template\u003e\n    invalid\n      ✓ \u003ctemplate\u003e\u003cdiv class=\"tertiary q-display-3 q-headline quote capitalize mat-only gutter-md\"\u003e\u003c/div\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cdiv class=\"tertiary\"\u003e\u003c/div\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cdiv class=\"bg-tertiary\"\u003e\u003c/div\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cdiv class=\"text-tertiary\"\u003e\u003c/div\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cdiv class=\"q-display-4\"\u003e\u003c/div\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cdiv class=\"q-display-3\"\u003e\u003c/div\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cdiv class=\"q-display-2\"\u003e\u003c/div\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cdiv class=\"q-display-1\"\u003e\u003c/div\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cdiv class=\"q-headline\"\u003e\u003c/div\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cdiv class=\"q-title\"\u003e\u003c/div\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cdiv class=\"q-subheading\"\u003e\u003c/div\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cdiv class=\"q-body-1\"\u003e\u003c/div\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cdiv class=\"q-body-2\"\u003e\u003c/div\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cdiv class=\"q-caption\"\u003e\u003c/div\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cdiv class=\"quote\"\u003e\u003c/div\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cdiv class=\"capitalize\"\u003e\u003c/div\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cdiv class=\"lowercase\"\u003e\u003c/div\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cdiv class=\"uppercase\"\u003e\u003c/div\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cdiv class=\"highlight-and-fade\"\u003e\u003c/div\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cdiv class=\"mat-only\"\u003e\u003c/div\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cdiv class=\"ios-only\"\u003e\u003c/div\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cdiv class=\"mat-hide\"\u003e\u003c/div\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cdiv class=\"ios-hide\"\u003e\u003c/div\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cdiv class=\"round-borders\"\u003e\u003c/div\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cdiv class=\"gutter-xs\"\u003e\u003c/div\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cdiv class=\"gutter-sm\"\u003e\u003c/div\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cdiv class=\"gutter-md\"\u003e\u003c/div\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cdiv class=\"gutter-lg\"\u003e\u003c/div\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cdiv class=\"gutter-xl\"\u003e\u003c/div\u003e\u003c/template\u003e\n\n  no-legacy-directives\n    valid\n      ✓ \u003ctemplate\u003e\u003cdiv v-close-popup\u003e\u003c/div\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cdiv v-go-back\u003e\u003c/div\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cdiv v-intersection\u003e\u003c/div\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cdiv v-mutation\u003e\u003c/div\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cdiv v-ripple\u003e\u003c/div\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cdiv v-scroll\u003e\u003c/div\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cdiv v-scroll-fire\u003e\u003c/div\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cdiv v-touch-hold\u003e\u003c/div\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cdiv v-touch-pan\u003e\u003c/div\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cdiv v-touch-repeat\u003e\u003c/div\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cdiv v-touch-swipe\u003e\u003c/div\u003e\u003c/template\u003e\n    invalid\n      ✓ \u003ctemplate\u003e\u003cdiv v-back-to-top\u003e\u003c/div\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cdiv v-close-overlay\u003e\u003c/div\u003e\u003c/template\u003e\n\n  no-legacy-plugins\n    valid\n      ✓ \u003ctemplate\u003e\n  \u003cq-list :dense=\"$q.screen.lt.md\"\u003e\n    \u003cq-item\u003e\n      \u003cq-item-section\u003eJohn Doe\u003c/q-item-section\u003e\n    \u003c/q-item\u003e\n\n    \u003cq-item\u003e\n      \u003cq-item-section\u003eJane Doe\u003c/q-item-section\u003e\n    \u003c/q-item\u003e\n  \u003c/q-list\u003e\n\u003c/template\u003e\n\nexport default {\n  computed: {\n    buttonColor () {\n      return this.$q.screen.lt.md\n        ? 'primary'\n        : 'secondary'\n    }\n  }\n}\n\n    invalid\n      ✓ \u003ctemplate\u003e\n  \u003cq-list :dense=\"$q.actionSheet\"\u003e\n    \u003cq-item\u003e\n      \u003cq-item-section\u003eJohn Doe\u003c/q-item-section\u003e\n    \u003c/q-item\u003e\n\n    \u003cq-item\u003e\n      \u003cq-item-section\u003eJane Doe\u003c/q-item-section\u003e\n    \u003c/q-item\u003e\n  \u003c/q-list\u003e\n\u003c/template\u003e\n\nexport default {\n  computed: {\n    buttonColor () {\n      return this.$q.actionSheet\n        ? 'primary'\n        : 'secondary'\n    }\n  }\n}\n\n\n  no-legacy-properties\n    valid\n      ✓ \u003ctemplate\u003e\u003cq-avatar color=\"red\" text-color=\"white\" icon=\"directions\" /\u003e\u003c/template\u003e\n    invalid\n      ✓ \u003ctemplate\u003e\u003cq-banner actions avatar color detail icon message text-color type\u003e\u003c/q-banner\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-breadcrumbs color\u003e\u003c/q-breadcrumbs\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-breadcrumbs-el color event\u003e\u003c/q-breadcrumbs-el\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-btn no-ripple repeat-timeout wait-for-ripple\u003e\u003c/q-btn\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-btn-dropdown dark-percentage no-ripple percentage popover-anchor popover-self repeat-timeout wait-for-ripple\u003e\u003c/q-btn-dropdown\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-btn-toggle no-ripple wait-for-ripple\u003e\u003c/q-btn-toggle\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-card color inline text-color\u003e\u003c/q-card\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-carousel animation color easing handle-arrow-keys no-swipe quick-nav quick-nav-icon quick-nav-position swipe-easing thumbnails-horizontal thumbnails-icon\u003e\u003c/q-carousel\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-checkbox checked-icon indeterminate-icon no-focus readonly unchecked-icon\u003e\u003c/q-checkbox\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-chip avatar closable detail floating pointing small tag\u003e\u003c/q-chip\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-dialog cancel color ok message options prevent-close prompt stack-buttons title\u003e\u003c/q-dialog\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-drawer no-hide-on-route-change\u003e\u003c/q-drawer\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-infinite-scroll handler inline\u003e\u003c/q-infinite-scroll\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-inner-loading visible\u003e\u003c/q-inner-loading\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-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\u003e\u003c/q-input\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-item event highlight inset-separator link multiline separator sparse\u003e\u003c/q-item\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-knob decimals line-width\u003e\u003c/q-knob\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-linear-progress animate height keep-on-percentage\u003e\u003c/q-linear-progress\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-list highlight inset-separator link no-border sparse striped striped-odd\u003e\u003c/q-list\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-menu anchor-click disabled keep-on-screen\u003e\u003c/q-menu\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-option-group no-parent-group readonly\u003e\u003c/q-option-group\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-popup-edit keep-on-screen validate\u003e\u003c/q-popup-edit\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-pull-to-refresh handler distance inline pull-message release-message refresh-icon refresh-message\u003e\u003c/q-pull-to-refresh\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-radio checked-icon no-focus readonly unchecked-icon\u003e\u003c/q-radio\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-range decimals error fill-handle-always square warning\u003e\u003c/q-range\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-route-tab color count hidden hide\u003e\u003c/q-route-tab\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-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\u003e\u003c/q-select\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-slider decimals error fill-handle-always square warning\u003e\u003c/q-slider\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-step default order subtitle\u003e\u003c/q-step\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-stepper color contractable no-header-navigation\u003e\u003c/q-stepper\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-tab color count default hidden hide\u003e\u003c/q-tab\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-table selected-rows-label pagination-label\u003e\u003c/q-table\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-tabs animated color glossy inverted panes-container-class position swipeable text-color two-line underline-color no-pane-border\u003e\u003c/q-tabs\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-timeline no-hover responsive\u003e\u003c/q-timeline\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-timeline-entry subtitle title\u003e\u003c/q-timeline-entry\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-toggle no-focus readonly\u003e\u003c/q-toggle\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-toolbar color glossy inverted shrink text-color\u003e\u003c/q-toolbar\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-tooltip disabled\u003e\u003c/q-tooltip\u003e\u003c/template\u003e\n      ✓ \u003ctemplate\u003e\u003cq-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\u003e\u003c/q-uploader\u003e\u003c/template\u003e\n\n\n  270 passing (678ms)\n\nDone in 1.07s.\n```\n","funding_links":["https://github.com/sponsors/hawkeye64","https://github.com/sponsors/rstoenescu"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquasarframework%2Feslint-plugin-quasar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fquasarframework%2Feslint-plugin-quasar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquasarframework%2Feslint-plugin-quasar/lists"}