Navigation

    Quasar Framework

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. MusicForMellons
    M
    • Profile
    • Following
    • Followers
    • Topics
    • Posts
    • Best
    • Groups

    MusicForMellons

    @MusicForMellons

    9
    Reputation
    120
    Posts
    1010
    Profile views
    0
    Followers
    0
    Following
    Joined Last Online

    MusicForMellons Follow

    Posts made by MusicForMellons

    • RE: What is the best way to handle q-table props??

      @Hawkeye64 @s-molinari Uh…, is this still relevant under quasar v1 ?

      posted in Help
      M
      MusicForMellons
    • RE: Webpack alias in quasar.conf.js .15+

      @nachodd Thanks. BTW I moved to vscode…

      posted in Help
      M
      MusicForMellons
    • scrollbar appears

      I have a scrollbar appearing on all my pages. The issue seems pretty similar to this one, but I did not have the problem when on version 0.17 (and earlier), but it started after being on v1.0.0, so that is odd. I have it both on Chrome and on Firefox. I can make the scrollbar disappear by unchecking body { min-height: 100vh } in Chrome dev, but I do not know how to unset this css value in my code. I tried body { min-height: unset } and body {min-height: auto} but the scrollbar remains. Here is a fiddle that shows the behavior.

      posted in Help
      M
      MusicForMellons
    • RE: [solved] When is Dom ready for scroll?

      After using @load for the scroll-element and adding a nextTick it seems to work as should. See this stackoverflow-issue .

      posted in Help
      M
      MusicForMellons
    • [solved] When is Dom ready for scroll?

      I have multiple children and need to scroll to a certain child after loading the page. I can do so by setting a delay using setTimeout but I would prefer a better/ fail-proof solution. My current approach is to wait for all children to mount (and use nextTick) and thought it should be ready for the scroll, but apparently not. Alternatively I can wait for all images to be loaded (as QImg has a @load event), but that is really late, since manually I can already trigger a scroll while image boxes are already rendered but still loading. What is the best way to trigger at ‘the earliest possible moment’?

      Point-panel (parent):

      new Vue({
        el: '#q-app',
        template: `
            <div id="point-panel" class='map-overlay column scroll'>
                  <small-cards @child-mounted='cardsAreReady' 
                       v-for='(point, cardIndex) in picArray'
                       :key="cardIndex"
                       :point-object="point"
                       :card-index="cardIndex"></small-cards>
                  <q-btn @click.native="scrollToCenter"
                 fab
                 ripple
                 class='fixed'
                 size="10px"
                 color="black"
                 label="scroll"
                 style="right: 18px; bottom: 120px" />
        </div>
              </div>
          `,
        data() {
          return {
            parentMounted: false,
            selectedPointIndex: 6,      
            picArray: ["https://image1", "https://image2, "https://image_etc."]
           }
            },
            mounted: function() {
            let that = this
            	that.$nextTick( function(){
              	that.parentMounted = true
              })
            },
            methods: {
              notify(msg) {
                this.$q.notify(msg)
              },
              cardsAreReady(cardIndex) {
                console.log('one ready.......', `${cardIndex + 1} ...and total ${this.picArray.length}`)
                let that = this
                if (cardIndex + 1 === this.picArray.length) {
                  console.log('....all cards MOUNTED!', cardIndex)
                  setTimeout(() => {
                    that.$nextTick(() => {
                      console.log('..........trigger scroll NOW!')
                      if (that.parentMounted === true) {
                        that.scrollToCenter()
                      } else {
                        that.$q.notify('parent not yet ready!!')
                      }
                    })
                  }, 0)
                }
              },
              scrollToCenter() {
                const that = this
                console.log('..........cardIndex: ', that.selectedPointIndex)
          
          
                function scrollFunction() {
                  that.notify('scroll triggered!')
                  const element = document.getElementsByClassName(
                    that.selectedPointIndex.toString()
                  )
                  const target = document.getElementById('point-panel')
                  const iW = window.innerWidth
                  const iH = window.innerHeight
                  const myOffset = element[0].offsetLeft
                  Quasar.utils.scroll.setHorizontalScrollPosition(target, myOffset, 0)
          
                }
                setTimeout(() => scrollFunction(), 0)
              }
            }
          })
          
      

      Images/ small-cards (children):

      Vue.component('small-cards', {
        props: {
          pointObject: {
            type: Object,
            required: true
          },
          cardIndex: {
            type: Number,
            required: true,
            default: 0
          }
        },
        data() {
          return {
            selectedPointIndex: 6
          }
        },
        mounted: function() {
        let that = this
        that.$nextTick(function () {
         that.$emit('child-mounted', this.cardIndex)
         })
        },
        methods: {
          reportError(event) {
            console.log(`${event.name}: ${event.message}`);
          },
        },
        template: `
              <div class="mycard"
             :class="{'active': cardIndex === selectedPointIndex,
                [cardIndex]: true}">
          <q-img :src="pointObject"
                 spinner-size="30px"
                 style="background-color: rgba(255, 225, 215, 0.4)"
                 @error="reportError">
          </q-img>
        </div>
        `
      })
      

      Here you can find a jsfiddle showing the issue. I have added a scroll button to show that after loading you can trigger a scroll successfully (the 6th picture, i.e. ‘the Tiger’ is scrolled to the bottom-left corner).

      To give the question somewhat more direction: The problem is that if scroll is triggered to soon the Dom is not yet rendered and thus the distance to scrol can not yet be determined. But I would think that after mount in combination with $nextTick the Dom should be determined?! So why does current approach not work?

      posted in Help
      M
      MusicForMellons
    • RE: @quasar/app 1.0.0-rc.4 released!

      Yeah, I am on core-js 2 now and it works. Thanks!

      posted in Announcements
      M
      MusicForMellons
    • RE: 12 new high vulnerabilities listed in npm audit after upgrade to RC

      Yeah for me too. Got some other errors now when running my app which I reported elsewhere.

      posted in CLI
      M
      MusicForMellons
    • RE: @quasar/app 1.0.0-rc.4 released!

      I upgraded and the preset is included in my babel.config.js . When running dev script on my app I get:

      > Executing task: npm run dev <
      
      
      > Myapp@0.0.1 dev /home/usr/myproject
      > quasar dev
      
      
       Dev mode.......... spa
       Pkg quasar........ v1.0.0-rc.2
       Pkg @quasar/app... v1.0.0-rc.4
       Debugging......... enabled
      
       app:quasar-conf Reading quasar.conf.js +0ms
       app:dev Checking listening address availability (0.0.0.0:8080)... +4ms
      (node:25416) UnhandledPromiseRejectionWarning:   TypeError: Cannot destructure property `createHash` of 'undefined' or 'null'.
        
        - index.js:25 Object.<anonymous>
          [y1]/[mini-css-extract-plugin]/dist/index.js:25:5
        
        - module.js:11 require
          internal/module.js:11:18
        
        - cjs.js:3 Object.<anonymous>
          [y1]/[mini-css-extract-plugin]/dist/cjs.js:3:18
        
      
      (node:25416) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
      (node:25416) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
      
      posted in Announcements
      M
      MusicForMellons
    • RE: 12 new high vulnerabilities listed in npm audit after upgrade to RC

      I tried both npm and yarn, but both give same problems on a project that was working fine on v1 beta. After deleting node_modules and package-lock.json and reinstalling I get error saying all kinds of packages missing and suggesting to install them with:

      To install them, you can run: npm install --save core-js/modules/es.array-buffer.slice core-js/modules/es.array.concat core-js/modules/es.array.filter core-js/modules/es.array.find core-js/modules/es.array.find-index core-js/modules/es.array.flat core-js/modules/es.array.includes core-js/modules/es.array.index-of core-js/modules/es.array.iterator core-js/modules/es.array.join core-js/modules/es.array.map core-js/modules/es.array.slice core-js/modules/es.array.sort core-js/modules/es.array.splice core-js/modules/es.array.unscopables.flat core-js/modules/es.function.name core-js/modules/es.map core-js/modules/es.number.constructor core-js/modules/es.number.is-integer core-js/modules/es.number.to-fixed core-js/modules/es.object.assign core-js/modules/es.object.entries core-js/modules/es.object.get-own-property-descriptor core-js/modules/es.object.keys core-js/modules/es.object.to-string core-js/modules/es.parse-float core-js/modules/es.parse-int core-js/modules/es.promise core-js/modules/es.promise.finally core-js/modules/es.regexp.constructor core-js/modules/es.regexp.to-string core-js/modules/es.string.anchor core-js/modules/es.string.ends-with core-js/modules/es.string.fixed core-js/modules/es.string.includes core-js/modules/es.string.iterator core-js/modules/es.string.match core-js/modules/es.string.replace core-js/modules/es.string.split core-js/modules/es.string.starts-with core-js/modules/es.string.trim core-js/modules/es.symbol core-js/modules/es.symbol.description core-js/modules/es.typed-array.copy-within core-js/modules/es.typed-array.every core-js/modules/es.typed-array.fill core-js/modules/es.typed-array.filter core-js/modules/es.typed-array.find core-js/modules/es.typed-array.find-index core-js/modules/es.typed-array.for-each core-js/modules/es.typed-array.includes core-js/modules/es.typed-array.index-of core-js/modules/es.typed-array.iterator core-js/modules/es.typed-array.join core-js/modules/es.typed-array.last-index-of core-js/modules/es.typed-array.map core-js/modules/es.typed-array.reduce core-js/modules/es.typed-array.reduce-right core-js/modules/es.typed-array.reverse core-js/modules/es.typed-array.set core-js/modules/es.typed-array.slice core-js/modules/es.typed-array.some core-js/modules/es.typed-array.sort core-js/modules/es.typed-array.subarray core-js/modules/es.typed-array.to-locale-string core-js/modules/es.typed-array.to-string core-js/modules/es.typed-array.uint8-clamped-array core-js/modules/web.dom-collections.for-each core-js/modules/web.dom-collections.iterator
      

      But these seem core-js files so I am puzzled…?!

      posted in CLI
      M
      MusicForMellons
    • RE: 12 new high vulnerabilities listed in npm audit after upgrade to RC

      Exact same here.

      posted in CLI
      M
      MusicForMellons