Quasarians in Action #15. With Staff Pick of the Week!

[s.molinari]

We would like to thank all of you, our awesome Quasar community. And in a spirit of give and share we’d like to present our cherry-picked community contributions with you. One of the contributions is picked by the team as our “Pick of the Week” to honor who we felt made the best contribution (outside of the core team).

Do not forget to participate or just directly kick-off the first Quasar Development Meetup.

Tips of the Week

Make your qtabs and qbuttons more fluent after a touch. Add a nexttick inside your called method and call it async:

async myMethod () {
      await this.$nextTick()
      // after this your action
},

Pimp up your dialog: add this line to your q-dialog

content-style="backdrop-filter: blur(2px) grayscale(60);"

and see what happens… Works on Chrome and Safari (yes safari … also ios … ) … (firefox only if gfx.webrender enabled)

Do you want to see more? Share yours via Discord and tag @Stanislav (EN/CZ-eu).

Tutorials and Articles

godeguru.io added new videos like How to Host Quasar application on aws in 10 mins using aws-amplify or How to upgrade Quasar application to latest version and vscode setup as a part of the serie Getting started with quasar framework and aws-amplify.

Aleksey Razbakov wrote Vue + Google Firebase Analytics where he describes how to enable Firebase Analytics for his SPA/PWA budgeting app.

Reported and Fixed Issues

Quasar

Valianton reported 2 issues

• Qslider does not working in some cases which was fixed by a fix(TouchPan): mouseAllDir ignored on start #6099, released in Quasar 1.7.2
• QSlider — @input & @change event does not fire by @mousedown.native which was fixed by a fix(TouchPan): mouseAllDir should call handler immediately #6098, released in Quasar 1.7.2

a599155162 reported the issue types error: quasar 1.7.0 types/index.d.ts => LoadingBar.setDefaults which was fixed by a fix(typescript): manage methods rest parameters, released in Quasar 1.7.1
Brandon reported the issue Multiple chunks emit assets to the same filename which was fixed by a fix(app): Multiple chunks could potentially emit assets with the same filename #6071, released in Quasar app 1.5.0
Morten Scheel reported the issue Bug: QField with validation error and no value should only have a floating label if focused. which was fixed by a fix(QField): Do not float label on empty field with error #6065, released in Quasar 1.7.0
Luca Ban reported the issue QDialogOptions interface doesn’t allow any prop to be passed which was fixed by a feat(typescript): manage rest-style props and params typings, released in Quasar 1.7.0
Alex reported the issue QTable not updating properly when connected to server which was fixed by a docs(QTable): Fix glitch in server side QTable example #6053
Dorcílio João de Oliveira Neto reported the issue Custom INPUT using QField alignment bug which was fixed by a chore(QField): Use .q-field__input for custom input in QField and QSelect #6049, released in Quasar 1.7.0
Morten Scheel reported the issue, which has the best reproduction steps we have seen so far, Bug: QSelect can’t add new values in Dialog mode, if the filter function has a delay. which was fixed by a fix(QSelect): Fix check for valid kbd target when in dialog mode and close single select after add new #6048, released in Quasar 1.7.0
Daviz reported the issue Error when switching to grid mode <-> list mode on QTable which was fixed by a fix(QTable): Guard existence of $refs.virtScroll in needsReset watcher #6038, released in Quasar 1.6.2
Marek Kaczkowski reported the issue no-hover not working if q-table element is in slot which was fixed by a fix(QTr/QTd): Fix noHover not beeing respected when props are missing. Fix wrong on in QTr #6035, released in Quasar 1.6.2
jvaca92 reported the issue Issue with QBtn located in toolbar in browser IE11 which was fixed by a fix(ie): IE11 on Win10 requires .q-focus-helper with z-index 1 or else ignores opacity #6004, released in Quasar 1.6.2
Vu Dang Tu reported the issue q-menu transition not working on IOS devices which was fixed by a fix(QMenu/QTooltip): Use margin-left/-top to reposition QMenu/QTooltip on iOS when viewport is zoomed to allow transitions #5955, released in Quasar 1.6.2
Neginegi reported the issue [Windows]Electron process terminated after changing main-process code which was fixed by a fix(app): [Windows] Electron process terminated after changing main-process code #5949, released in Quasar app 1.4.4

Submitted PRs

Quasar

Jesús Villanueva Ramos submitted a PR fix(docs): change link JDK
ibrainventures submitted a PR fix(model-toggle) prevent qdialog input-event emitting on each routechange

Paolo Caleffi submitted 4 PRs:

• fix(typescript): manage methods rest parameters, fix: #6088
• fix(typescript): manage rest-style props and params typings, fix: #6055
• [docs] suggest localhost.run instead of Serveo, fixes #6059
• fix(typescript): change ‘Object’ type with more permissive ‘LooseDictionary’

Andreas Waschinski submitted 2 PRs:

• fix(docs): prettier.eslintIntegration is no longer used
• Documentation fixes: Configure VS Code

Luca Ban submitted 2 PRs:

• fix(docs): comment a comment
• without --ide it won’t open XCode or Android Studio

QCalendar

Jesús Villanueva Ramos submitted a PR perf(timestamp): isBetweenDates with useTime
nothingismagick submitted a PR feat(testing): add and rig jest, first tests

QMarkdown

Jesús Villanueva Ramos submitted a PR fix: code with line numbers can overflow on small displays

The list does not include PRs from the Quasar Core team.

Quasar Awesome Example Applications

Staff Pick of the Week Luca Ban shared easy-forms. A component to easily generate (Quasar) forms by only defining a “schema” object.

easy-tables. A component to easily generate (Quasar) tables by only defining a “schema” object. (based on the same schema as easy-forms).

erhanturan
| Simulstore | website | Simulstore is an Industrial AppStore. Tools for Engineering Calculations and Digital Twin Applications | v1.5.5 |

Marco Rivadeneyra
system-environment-variables | Loading of system environment variables for deploying on CI environment. |

Voloty is #1 social and business contest platform: Start a contest, the easy way.

Nwotable | github is a PWA to write github-flavored markdown. The design is strongly inspired by the Notable app. Nwotable is built with Vue.js, Quasar Framework and Vuex. It lets you write github-flavored markdown and organize your notes through tags.

Ahmad Ainul Rizki created Jancukers | github which allows users to perform web queries on popular internet search engines and store their query history safely in their Blockstack account. The query can then be repeated on different machines just by switching between them. And although search history data can be accessed by the user (you), it can also be easily deleted at the user’s discretion.

Our goal is to replace the centralized control system by building a bridge between known and new systems. Jancukers is just one piece of the puzzle, and we are proud to add one more method that users can do slowly, but of course, take back control of their digital lives.

Matthew Thomas Donovan created TurboNotes. A mobile checklist app that allows users to manage multiple checklists

RivalQuask | github - An unofficial solo variant by Marek Tupy for The Quacks of Quedlinburg by Wolfgang Warsch implemented by Andreas Waschinski using Quasar Framework.

Quasar Releases

As always you can find all latest releases and release notes in the documentation.

Quasar Official App Extension Releases

QCalendar - v1.3.13, v1.3.12
QMarkdown - v1.0.16

Thank you for your valuable time in making Quasar a better framework! We’ll be continuing this posting of favorites in the coming weeks. Stay tuned!

If you like this aggregation of best contributions and would even like a more direct reception of this information, or you have any other ideas for honoring contributions to Quasar, please let us know in the Discord.