Quasarians in Action #19. 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).

Tips of the Week

If you want load your CDN script programmatically:

checkStripeLoaded () {
  if (window.Stripe) {
    this.stripeLoaded = true
    return
  }
  const script = document.createElement('script')
  script.src = this.src
  script.onload = this.checkStripeLoaded
  document.head.appendChild(script)
}, 

and inside data you declare src = "url of the cdn-ed js".

A tip on transparent wrappers for components to set default options:

<template>
  <q-input
    ref="myWrapperInput"
    v-bind="$attrs" <!-- Copies props passed through to this component into QInput -->
    v-on="$listeners" <!-- Copies listeners passed through to this component into QInput -->
    :dense="dense"
  >
    <!-- Carry over all the slots to QInput -->
    <slot
      v-for="(slot, key) in $slots"
      :name="key"
      :slot="key"
    />

    <template
      v-for="(slot, key) in $scopedSlots"
      :slot="key"
      slot-scope="scope"
    >
      <slot :name="key" v-bind="scope"/>
    </template>
  </q-input>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  inheritAttrs: false,
  name: 'MyWrapperInput',
  props: {
    dense: {
      type: Boolean,
      required: false,
      default: true
    }
  }
})
</script>

Reported and Fixed Issues

Quasar

Shawn Makinson reported the issue QCarousel & autoplay as Number in 1.9.0 which was fixed by a fix(QCarousel): Autoplay breaks when it’s a number (#6408)
martijn788 reported the issue Target is passed to QMenu but might be a boolean which was fixed by a fix(QMenu): Fix updatePosition() logic when target is disabled #6406
Bob Kuivanen reported the issue q-toggle icon appears over q-page-sticky which was fixed by a fix(QToggle): Use z-index on .q-toggle__thumb to prevent the whole block going hight in the z stack #6398
Nicholas Zuccarelli reported the issue QColor - cannot enter a value in input box which was fixed by a fix(QColor): cannot enter a value in input box #6390
Greg Veres reported the issue Why is .vscode in .gitignore? which was fixed by a feat: remove .vscode from gitignore https://github.com/quasarframework/quasar/issues/6389
Denis Mashkov reported the issue Problem with parsing colors which was fixed by a fix(colors/textToRgb): text is wrongly parsed #6388
Haász Sándor reported the issue QUploder removeFile error which was fixed by a fix(QUploader): correct call on abort() on xhr Object #6387
Krzysztof Konopka reported the issue [Bug] Notify - onDismiss is always triggered before action handlers which was fixed by a fix: action handlers in Notify are again triggered before onDismiss (fix #6380)
Diadal reported the issue copyToClipboard not working on iOS which was fixed by a fix(copyToClipboard): enhance compatibility with some versions of iOS #6378
Pratik Patel reported the issue QTable Examples is not working which was fixed by a fix(QTable): Fix height on old Chrome #6370
Joep vd Staaij reported the issue Version 1.9.0 introduces TypeScript issues when building using the vue cli which was fixed by a fix(typescript): move Quasar CLI related typings to @quasar/app
heartbeat reported the issue Reset model after form validation cause validation error which was fixed by a fix(validation): Use null for isDirty on reset to allow starting lazy validation only after focus ##6353
Milad reported the issue QFile clearable doesn’t work which was fixed by a fix(file model): Vue domProps tries to clear old domProps with ‘’ if not present in new #6351
Sonit90 reported the issue QUploader thumbs slows down a webpage, when working with big images, because of base64 encoding which was fixed by a perf(QUploader): Use createObjectUrl to preview images and make noThumbnails reactive #6348
Eldar reported the issue Invalid sass selector in 1.9.0 which was fixed by a fix(QExpansionItem): Add fake animation to make linter happy #6347
duongpc reported the issue Q-select not rendering value correctly from Chrome autofill which was fixed by a feat(QSelect): Autofocus when input is autofilled #6342
Teodorko reported the issue QSelect - displacement “options” in right col which was fixed by a fix(PositionEngine): Do not horizontal reposition QMenu when fit or cover. Reposition on show to catch changes in layout between show request and real show #6328
Alexei Strasser reported 2 issues:

• Scrolling in q-table with virtual-scroll is buggy when expansion row is added which was fixed by a feat(VirtualScroll): Add utility classes .q-virtual-scroll–skip and .q-virtual-scroll–with-prev #6224
• Scrolling in q-table with virtual-scroll is buggy when expansion row is added which was fixed by a feat(VirtualScroll): Add utility classes .q-virtual-scroll–skip and .q-virtual-scroll–with-prev #6224

yev reported the issue [Bug] Dialog not closing on back button on Capacitor build which was fixed by a feat(backButton): Enable backButton behavior for Dialogs on Capacitor apps too #6134
jeancaffou reported the issue Reopening #5987 - quasar build -m pwa failing which was fixed by a break pwa build - https://github.com/quasarframework/quasar/issues/6096
MartinManev reported the issue QCheckbox on IE11: Always shows icon for indeterminate state which was fixed by a fix(ie): Hide indet checkbox SVG (does not support transform) and remove obsolete fix for QToggle #6329
Dario De Paolis reported the issue Q-Select typing text doesn’t work with keyRepeat and option-label as function which was fixed by a fix(docs): Fix custom label example for QSelect #6305
Ejez reported the issue quasar.dev: clicking on an item in the TOC does not update url which was fixed by a feat(docs): Change url hash when clicking on links (without page scrolling) #6294
Ilia Pikulev reported the issue q-time doesn’t behave well when combined with date model which was fixed by a feat(QTime): Add defaultDate prop (defaults to current day) to fill the date part if not present #6279
Emilio Losada reported the issue QPopupProxy does not pass target prop to QMenu component which was fixed by a fix(QPopupProxy): Pass target prop to QMenu #6192
Gerardo reported the issue Post radio and select in dotnecore controller which was fixed by a feat(QSelect,QToggle,QCheckbox,QRadio): Pass attrs to toggles, set native elements for form processing #5963

Submitted PRs

Quasar

Jesús Villanueva Ramos submitted a PR feat(Dialog-plugin): add style properties in prompt
Kerry submitted a PR fix(app): Add missing “types” folder into the package.json files list.
Krzysztof Konopka submitted a PR fix: action handlers in Notify are again triggered before onDismiss (fix #6380)
M4thG33k submitted a PR fix(docs): Update QPopupProxy’s breakpoint prop description
Félix Dion-Robidoux submitted a PR Fixed typo in visibility.md
Paolo Caleffi submitted a PR fix(typescript): move Quasar CLI related typings to @quasar/app, fix: #6360
Andrew Zolotarev submitted a PR Update commands-list.md
Ramsés Moreno submitted a PR feat(docs): Update responsive.md Flex row note
Ryan Delk submitted a PR chore(docs): Fix typos (“it’s” -> “its”)
Mateo Nunez submitted a PR feat(QImg): implements width and height params
Andre-John Mas submitted a PR Added an example for scssLoaderOptions
João Menighin submitted a PR Update QTable docs
Paolo Caleffi submitted a PR feat(typescript): PR #5944 and #5815 already merged
Ejez submitted a PR fix(docs): Fix issue of anchors getting hidden

App Extension Apollo

Ejez submitted a 5 PRs

• fix: Correct boot file path
• chore: Rename AE to ‘quasar-app-extension-apollo’
• feat: Add apollo client config file
• fix: Update project references
• chore: Complete refactoring

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

Repository Activity

Quasar

• rstoenescu - 46
• pdanpdan - 9
• webnoob - 3
• hawkeye64 - 2

App Extension Apollo

• Contributors - 11 (commits by Quasar community)
• smolinari - 13

Quasar Starter Kit

• rstoenescu - 10

Quasar Awesome

• Contributors - 4 (commits by Quasar community)
• valasek - 1

Firebase Sample Apps

• Contributors - 4 (commits by Quasar community)

hawkey64 also contributed to the following repositories:

• QCalendar - 13
• QMarkdown - 4
• ESLint Plugin Quasar - 1
• Quasar Starter Kit UI - 1
• QMediaPlayer - 1

Quasar Awesome Example Applications

msegura created his first Quasar/Drupal website

Mayank Patel shared his Quasar CRM Admin - A free and beautiful Quasar template for CRM needs - github, website

Patrick Monteiro created Quasar 3D Model sample application with a 3D file renderer (.stl, .obj, .json, .dae, .ply, .gltf) - github, demo

Pratik Patel created:

• QGrid - QGrid is a Quasar App Extension. It allows you to filter data for each column, Drag and Drop Rows and also allows you to filter data using header filters.
• QHierarchy - QHierarchy is a Quasar App Extension. It allows you to display data in hierarchy structure on your page.

Ramsés Moreno shared his vuelidate-rules - A Quasar Framework app extension that allows you to use Vuelidate methods as internal Quasar rules in fields of a form

Quasar Releases

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

Quasar Official App Extension Releases

Staff Pick -New release of our GraphQL app extensions by ejez:

• Apollo - Add the best GraphQL Client to your Quasar Apps now (still in Alpha)!

QCalendar - v1.4.0, v1.3.17
QMarkdown - v1.0.23

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!

Call to action
Please share important or interesting contributions, Quasar community news, tutorials, videos or great goding tips and tricks. Those which you would like to see in the next Quasarians in Actions. Please use Quasar chat preferable in channels #i-made-this, #offtopic or #other AND tag @Stanislav (EN/CZ-eu).

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.

[Allan-EN-GB]

Great pick of the week!

[patryckx]

Great community work!