Best posts made by Hawkeye64

I just published my tutorial “Building an Electron File Explorer with Quasar (and Vue)”. If interested, check it out: https://medium.com/quasar-framework/building-an-electron-file-explorer-with-quasar-and-vue-7bf94f1bbf6

In case anyone wants to know how it is done: https://jsfiddle.net/Hawkeye64/noc64qr2/

@Ben-Hayat Ok, so I misread…I followed the herring instead of the bigger fish.

I think what you are looking for is a Quasar plugin:
https://quasar-framework.org/guide/app-plugins.html

Examples of plugins I use:

import AnimatedVue from 'animated-vue'

export default ({ Vue }) => {
  Vue.use(AnimatedVue)
}

import axios from 'axios'

export default ({ Vue }) => {
  Vue.prototype.$axios = axios
}

// batman's utility belt for javascript
import _ from 'lodash'

export default ({ Vue }) => {
  Vue.prototype._ = _
}

import moment from 'moment'

// leave the export, even if you don't use it
export default ({ Vue }) => {
  Vue.prototype.$moment = moment
}

// form validation
// See: https://www.npmjs.com/package/slug this project is dead
// now using dodoslug, a fork of node-slug
// See: https://github.com/dodo/node-slug
import slug from 'dodoslug'

slug.defaults.modes['mymode'] = {
  replacement: '-', // replace spaces with replacement
  symbols: true, // replace unicode symbols or not
  remove: /[._]/g, // (optional) regex to remove characters
  lower: true, // result in lower case
  charmap: slug.charmap, // replace special characters
  multicharmap: slug.multicharmap // replace multi-characters
}
slug.defaults.mode = 'mymode'

export default ({ Vue }) => {
  Vue.prototype.$slug = slug
}

Congrats! Looks great!

and:

    toggleSettingsPopover: function () {
      this.displaySettingsMenu = !this.displaySettingsMenu
    },

I do it like this:

          <q-tab
            v-if="isLoggedIn && checkFeature('settings')"
            label="Settings <i class='fas fa-caret-down' />"
            name="settings"
            slot="title"
            icon="fas fa-cogs faa-pulse"
            class="faa-parent animated-hover"
            @click="toggleSettingsPopover()"
          >
            <q-popover v-model="displaySettingsMenu">
              <q-list item-separator link>

                <q-item
                  v-if="checkFeature('settings-system')"
                  to="settings-system"
                  replace
                  v-close-overlay
                >
                  <q-item-side left class="faa-parent animated-hover">
                    <q-item-tile icon="fas fa-cog faa-pulse" />
                  </q-item-side>
                  System
                </q-item>

                <q-item
                  v-if="checkFeature('settings-users') && isAdmin()"
                  to="settings-users"
                  replace
                  v-close-overlay
                >
                  <q-item-side left class="faa-parent animated-hover">
                    <q-item-tile icon="fas fa-user faa-pulse" />
                  </q-item-side>
                  Users
                </q-item>

                <q-item
                  v-if="checkFeature('settings-sites') && isAdmin()"
                  to="settings-sites"
                  replace
                  v-close-overlay
                >
                  <q-item-side left class="faa-parent animated-hover">
                    <q-item-tile icon="fas fa-map-marker faa-pulse" />
                  </q-item-side>
                  Sites
                </q-item>

                <q-item
                v-if="checkFeature('settings-sam') && isAdmin()"
                  to="settings-sams"
                  replace
                  v-close-overlay
                >
                  <q-item-side left class="faa-parent animated-hover">
                    <q-item-tile icon="fas fa-laptop faa-pulse" />
                  </q-item-side>
                  SAMs
                </q-item>

                <q-item
                  v-if="checkFeature('settings-hvr') && isAdmin()"
                  to="settings-hvrs"
                  replace
                  v-close-overlay
                >
                  <q-item-side left class="faa-parent animated-hover">
                    <q-item-tile icon="fas fa-video faa-pulse" />
                  </q-item-side>
                  DCAMs/HVRs
                </q-item>

                <q-item
                  v-if="checkFeature('settings-ptz') && isAdmin()"
                  to="settings-ptzs"
                  replace
                  v-close-overlay
                >
                  <q-item-side left class="faa-parent animated-hover">
                    <q-item-tile class="icon" icon="fas fa-ptz32 faa-pulse" />
                  </q-item-side>
                  PTZs
                </q-item>

                <q-item
                  v-if="checkFeature('settings-accessories') && isAdmin()"
                  to="settings-accessories"
                  replace
                  v-close-overlay
                  >
                  <q-item-side left class="faa-parent animated-hover">
                    <q-item-tile icon="fas fa-cubes faa-pulse" />
                  </q-item-side>
                  Accessories
                </q-item>

                <q-item
                  v-if="checkFeature('settings-analytic-control') && isAdmin()"
                  to="settings-analytic-control"
                  replace
                  v-close-overlay
                >
                  <q-item-side left class="faa-parent animated-hover">
                    <q-item-tile icon="fas fa-microchip faa-pulse" />
                  </q-item-side>
                  Analytic Control
                </q-item>

                <q-item
                  to="themes"
                  replace
                  v-close-overlay
                >
                  <q-item-side left class="faa-parent animated-hover">
                    <q-item-tile icon="fas fa-adjust faa-pulse" />
                  </q-item-side>
                  Themes
                </q-item>

              </q-list>
            </q-popover>
          </q-tab>

@KevinYang @s-molinari
I must say I like a bit of challenge. I think the issue you were having before is you needed more than one tr element, but that is where the scope goes. So, I tried a different approach and put a div in with the header scope.
Also, notice the style="display: contents" on the div.
You can see the results here: https://jsfiddle.net/Hawkeye64/5y6rbn9u/46/

@KevinYang
You can use single back tick for inline and tripple back tick for rows.
Very similar to this: https://help.github.com/articles/creating-and-highlighting-code-blocks/

You might also be interested that Vue now has more Github stars than React: https://github.com/search?utf8=✓&q=repo%3Avuejs%2Fvue+repo%3Afacebook%2Freact+repo%3Aangular%2Fangular&type=Repositories&ref=advsearch&l=&l=

FYI, with the release of Vue 2.6 (now up to 2.6.2) the code had to be reworked with breaking changes (their release should have been Vue 3.0.0-beta-1). It’s taken a couple of days to be Vue 2.6 compliant, and even then, if the Vue guys make more fixes, we may also have to as we’re downstream.

Very nice addition!

I’ve been experiencing this since the integration of WebPack 4. It seems after you do so many updates that it crashes. Some sort of memory leak they say is associated with a plug-in. You can monitor it’s progress here: https://github.com/webpack/webpack/issues/6929

A search would have found this thread: https://forum.quasar-framework.org/topic/2394/call_and_retry_last/6

Example:

      <q-btn icon="fas fa-chevron-circle-left" flat round color="teal-6" @click="setPrevDay">
        <q-tooltip anchor="bottom middle" self="top middle">Previous day</q-tooltip>
      </q-btn>
      <q-btn @click="setNextDay" icon="fas fa-chevron-circle-right" flat round color="teal-6" >
        <q-tooltip anchor="bottom middle" self="top middle">Next day</q-tooltip>
      </q-btn>

In a multi-select q-select, I am wondering if it’s possible to have an ellipsis at the end if the text runs over? Right now it is cut off and I don’t see a way of adding an ellipsis to the output. I did try adding the class="ellipsis" to the q-select but that did not work.

@rstoenescu Can an ellipsis option be added to q-select, similar to multiple and toggle?

Here’s documentation: https://quasar-framework.org/components/tooltip.html
Look at properties for anchor and self.
This is my go to tooltip position:

<q-tooltip anchor="bottom middle" self="top middle">Play/Pause</q-tooltip>

But depending where the tooltip shows up, I’ve had to adjust it a bit so the display doesn’t hide something:

<q-tooltip anchor="top middle" self="bottom middle">Date/Time</q-tooltip>

Hope that helps!

  <template>
  <q-page>
          <q-card class="bg-cyan-2 q-ma-xl">
            <q-card-main>
            <div v-for="(form, formIndex) in forms" :key="form.id">
              <q-field class="q-mb-sm" label="Form Title: " helper="Please enter the title of the question.">
                <q-input v-model="form.name" type="text" clearable />
              </q-field>
              <q-card-separator class="q-mb-md q-mt-xl"/>
           <div v-for="(question, questionIndex) in form.questions" :key="question.id">
            <q-btn class="q-mb-md" round size="sm" color="amber" icon="add" @click="addRowQuestions(formIndex)" />
            <q-field class="q-mb-sm" label="Question Title: " >
              <q-input v-model="question.text" />
            </q-field>
            <q-card-separator class="q-mb-md q-mt-xl"/>
              <div v-for="(answerChoice, answerIndex) in question.answerChoices" :key="answerChoice.id">
                <q-btn class="q-mb-md" round size="sm" color="green" icon="add" @click="addAnswers(formIndex, questionIndex)" />
                <q-field class="q-mb-sm" label="Answer ID: ">
                  <q-input v-model="answerChoice.answerId" type="number" clearable />
                </q-field>
            <q-card-separator class="q-mb-md q-mt-xl"/>
              </div>
           </div>
           </div>
            </q-card-main>
          </q-card>
  </q-page>
</template>

and

    addAnswers (formIndex, questionIndex) {
      this.forms[formIndex].questions[questionIndex].answerChoices.push({
        answerId: ''
      })
    }

Hope that helps! At least it should get you started.

There is a new test framework coming for Quasar: https://forum.quasar-framework.org/topic/2354/rfc-new-test-mode-coming-soon-to-quasar

@rstoenescu FYI…

$ npm audit

                       === npm audit security report ===

┌──────────────────────────────────────────────────────────────────────────────┐
│                                Manual Review                                 │
│            Some vulnerabilities require your attention to resolve            │
│                                                                              │
│         Visit https://go.npm.me/audit-guide for additional guidance          │
└──────────────────────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Low           │ Prototype Pollution                                          │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ lodash                                                       │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=4.17.5                                                     │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ quasar-cli [dev]                                             │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ quasar-cli > ouch > lodash                                   │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/577                       │
└───────────────┴──────────────────────────────────────────────────────────────┘
found 1 low severity vulnerability in 14191 scanned packages
  1 vulnerability requires manual review. See the full report for details.
$ quasar -v
0.17.9
$

@ssuess This is automatic and does its own platform checking. The minimized and maximized are there if you need to override the default behavior. Modals are responsive to the width of the window (see demo on a desktop and resize browser window). Sometimes you need to always have a Modal maximized or minimized regardless of window width, so to do this, Quasar offers the minimized and maximized props: https://quasar-framework.org/components/modal.html