No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. mesqueeb
    • Profile
    • Following 0
    • Followers 2
    • Topics 29
    • Posts 96
    • Best 22
    • Groups 0

    mesqueeb

    @mesqueeb

    I really try to enjoy life. And I try to always be sunshine. Positive and not overthink things. I succeed usually at being positive, but fail at not overthinking things. :)

    I found that I like the following things:

    • Photography (people mostly)
    • Teaching (anything)
    • Learning (about programming & technology)
    • Making lists
    • Databases (in general, I know it's weird…)
    • Films
    • Comedy
    • Love

    I'm currently into creating front-end only Progressive Web Apps (PWA's) with JavaScript (and Vue.js)!!
    Server side I write PHP (Laravel), NodeJS or Golang.

    31
    Reputation
    766
    Profile views
    96
    Posts
    2
    Followers
    0
    Following
    Joined Last Online
    Website lucaban.com Location Tokyo, Japan Age 32

    mesqueeb Follow

    Best posts made by mesqueeb

    • RE: Dynamic Theme Options

      You can Dynamically change the default Quasar color scheme with a special Stylus mixin.

      The creation of the mixin and the usage both explained towards the end of this thread:
      http://forum.quasar-framework.org/topic/1756/transform-scss-mixins-to-stylus

      It works great!

      posted in Help
      mesqueeb
      mesqueeb
    • RE: [Solved] PWA force refresh when new version released?

      @ssuess Anyway, if you look in service-worker-prod.js in the PWA source folder you will find this line:

      case 'installed':
      

      That’s where you need to write your logic. I had:

      case 'installed':
        // At this point, the old content will have been purged and the
        // fresh content will have been added to the cache.
        // It's the perfect time to display a "New content is
        // available; please refresh." message in the page's interface.
        if (!window.QNotify) {
          window.location.reload()
          break;
        }
        window.QNotify({
          message: window.store.getters.text.global.newVersionAvailable,
          timeout: 10000,
          type: 'info',
          actions: [{
            label: window.store.getters.text.global.refresh,
            handler: function () { window.location.reload() }
          }]
        })
        break;
      
      posted in Framework
      mesqueeb
      mesqueeb
    • Full solution to Dynamic color scheme + extras

      The following two SCSS mixins I need to use in Quasar Framework in Stylus:

      • Responsive Typography with min/max font-sizes:
        https://www.sassmeister.com/gist/7f22e44ace49b5124eec

      • Dynamic Theme CSS generator for multiple theme variables:
        https://www.sassmeister.com/gist/e99b7a8c01ef87d0dff8

      Once I found out how to rewrite these in Stylus I’ll post here so it can be useful for others as well!

      posted in Help
      mesqueeb
      mesqueeb
    • RE: [Solved] PWA force refresh when new version released?

      @ssuess Exactly… iOS really f*cked up the PWA support this time…

      I believe they want to make the worst compatibility as possible to make devs not use PWA’s and make more native apps. Because Apple won’t make money from PWA’s and they have more chances they will from native apps.

      Welcome to the world where money is more important than the consumers.

      posted in Framework
      mesqueeb
      mesqueeb
    • RE: Full solution to Dynamic color scheme + extras

      @leopiccionia I was able to successfully integrate it into my stylus files.

      The very cool thing you can do with this. You know Quasar has a lot of components where you can e.g. color="primary.
      Now if I include a styl file like so:

      .text-primary
        themify($themes, @($theme) {
          color: $theme.$primary !important
        })
      .bg-primary
        themify($themes, @($theme) {
          background: $theme.$primary !important
        })
      

      And you have a primary color setup for another theme e.g. theme-retro. Then just by adding the class theme-retro to the body tag all component’s primary color will change into your new theme!
      Isn’t that cool? : )

      You’d need to setup the retro theme like so:

      $themes = {
        "theme-retro": {
          "$primary": purple
        },
      }
      

      Now the final question: Do you think it’s possible to wrap it into another mixin to make using the mixin less verbose?
      Cheers!

      posted in Help
      mesqueeb
      mesqueeb
    • RE: Using custom icons in Quasar components

      @eleina A proposal is currently in progress to add the functionality for custom icons:
      https://github.com/quasarframework/quasar/issues/2494

      Also, in that thread is explained how to create your own icon font, though it be a bit cumbersome…

      posted in Framework
      mesqueeb
      mesqueeb
    • RE: Full solution to Dynamic color scheme + extras

      Full example:

      The variables in a styl file:

      $themes = {
        "theme-default": {
          '$primary': $primary
          '$secondary': $secondary
          '$tertiary': $tertiary
      
          '$neutral': $neutral
          '$positive': $positive
          '$negative': $negative
          '$info': $info
          '$warning': $warning
      
          '$light': $light
          '$dark': $dark
        },
        "theme-retro": {
          '$primary': purple
          '$secondary': lime
          '$tertiary': grey
      
          '$neutral': $neutral
          '$positive': $positive
          '$negative': $negative
          '$info': $info
          '$warning': $warning
      
          '$light': $dark
          '$dark': $light
        },
      }
      // Create the Stylus mixin:
      themify($themes, $mixin)
        for $theme in $themes
          .{$theme} &
            $mixin($themes[$theme])
      

      You can see that the themes hold the original values from Quasar. To change these you best change them before you make your $themes object.
      Then in the theme-retro you see I can leave original options or change to my second theme. I can even switch around light and dark!

      Then you have to add all the Quasar color classes with the correct mixin like so:

      
      .text-primary
        themify($themes, @($theme) {
          color: $theme.$primary !important
        })
      
      .bg-primary
        themify($themes, @($theme) {
          background: $theme.$primary !important
        })
      
      .text-secondary
        themify($themes, @($theme) {
          color: $theme.$secondary !important
        })
      .bg-secondary
        themify($themes, @($theme) {
          background: $theme.$secondary !important
        })
      
      .text-tertiary
        themify($themes, @($theme) {
          color: $theme.$tertiary !important
        })
      .bg-tertiary
        themify($themes, @($theme) {
          background: $theme.$tertiary !important
        })
      
      .text-faded
        themify($themes, @($theme) {
          color: $theme.$faded !important
        })
      .bg-faded
        themify($themes, @($theme) {
          background: $theme.$faded !important
        })
      
      .text-positive
        themify($themes, @($theme) {
          color: $theme.$positive !important
        })
      .bg-positive
        themify($themes, @($theme) {
          background: $theme.$positive !important
        })
      
      .text-negative
        themify($themes, @($theme) {
          color: $theme.$negative !important
        })
      .bg-negative
        themify($themes, @($theme) {
          background: $theme.$negative !important
        })
      
      .text-info
        themify($themes, @($theme) {
          color: $theme.$info !important
        })
      .bg-info
        themify($themes, @($theme) {
          background: $theme.$info !important
        })
      
      .text-warning
        themify($themes, @($theme) {
          color: $theme.$warning !important
        })
      .bg-warning
        themify($themes, @($theme) {
          background: $theme.$warning !important
        })
      
      .text-light
        themify($themes, @($theme) {
          color: $theme.$light !important
        })
      .bg-light
        themify($themes, @($theme) {
          background: $theme.$light !important
        })
      
      .text-dark
        themify($themes, @($theme) {
          color: $theme.$dark !important
        })
      .bg-dark
        themify($themes, @($theme) {
          background: $theme.$dark !important
        })
      

      That’s all! Now your Quasar components will change when you change a class on the <body> tag from theme-default to theme-retro.

      posted in Help
      mesqueeb
      mesqueeb
    • How to transpile entire vendor.js to ES5 (for IE11)

      I’m having difficulty making my app (which uses some dependencies like Firebase) work on IE11.

      vendor.js seems to keep including ES6 code which can’t be read on IE11.

      This is my setup:

      In build.config.js

      • supportIE: true,
      • transpileDependencies: [/.*/],

      In babel.config I have:

      module.exports = {
        presets: [['@babel/preset-env']],
        plugins: ['@babel/plugin-transform-runtime']
      }
      

      But when looking in the built dist/vendor.xxxx.js file, I still find things like getOwnPropertySymbols which is not supported on IE11…

      Any advice much appreciated!

      posted in Help
      mesqueeb
      mesqueeb
    • RE: Add columns to datatable in code

      Dear @テクニカル諏訪子
      What do you mean with “Only initialised columns get added, not the data-based columns.”

      (I’m actually from Japan, maybe you can try asking in Japanese, I’ll try to help)

      posted in Framework
      mesqueeb
      mesqueeb
    • RE: Creating custom app templates for quasar-cli

      @rstoenescu Thanks. I’m trying to install a helpers folder I have in a private repo on Github:

      vue init mesqueeb/templates/tree/master/styles/helpers helpers
      // but I get:
      (node:58697) ExperimentalWarning: The fs.promises API is experimental
         vue-cli · Failed to download repo mesqueeb/templates/tree/master/styles/helpers: Response code 404 (Not Found)
      
      posted in CLI
      mesqueeb
      mesqueeb

    Latest posts made by mesqueeb

    • How to make sure Capacitor version in `src-capacitor` and `src` stay the same?

      We add capacitor related versions and plugins all in src-capacitor like these:

      @capacitor/android
      @capacitor/cli
      @capacitor/core
      @capacitor/ios
      

      however, when they also need to be included inside the root package.json, otherwise we can’t open the dev server for the browser.

      But I noticed other devs in the team sometimes update the dependencies in one location but not the other, causing different capacitor versions to exist in the root and the src-capacitor locations.

      How can I avoid this?

      posted in Help
      mesqueeb
      mesqueeb
    • RE: Would you use Vue + Quasar to build a Marketing site?

      @qyloxe
      I’m interested in why you rate this:

      4- live data - option 2 - the data are refreshed after user action (filter, select, click on chart)
      UMD - 3
      SSR - 2
      SPA - 5
      

      For an SSR site, doesn’t Vue take over after the initial load of the page from the server side?
      Eg. after the initial load an SSR page becomes the exact same thing as the SPA.

      Therefore I would rate this category the same for SPA and SSR…

      Or do you disagree?

      posted in Hangout
      mesqueeb
      mesqueeb
    • icongenie difference between assets and include

      With the new icongenie, I can do this
      icongenie g -i /path/to/icon.png and it generates the icons for all modes installed for me.

      However, when working with a “profile” it seems like it cannot automatically detect modes for you, so I need to specify them.

      I’m confused in the documentation though, what the difference is between these:

          --assets, -a          Prefill the assets Array with Icon Genie's
                                internal list, based on the modes that you indicate;
                                  [all|spa|pwa|ssr|bex|cordova|capacitor|electron]
                                Multiple can be specified, separated by ",":
                                  spa,cordova
      

      and

          --include             Prefill the params.include property;
                                  [all|spa|pwa|ssr|bex|cordova|capacitor|electron]
                                Multiple can be specified, separated by ",":
                                  spa,cordova
      

      What does params.include property mean?

      And, just like quasar.conf I’d love an “auto” option!

      posted in CLI
      mesqueeb
      mesqueeb
    • How to transpile entire vendor.js to ES5 (for IE11)

      I’m having difficulty making my app (which uses some dependencies like Firebase) work on IE11.

      vendor.js seems to keep including ES6 code which can’t be read on IE11.

      This is my setup:

      In build.config.js

      • supportIE: true,
      • transpileDependencies: [/.*/],

      In babel.config I have:

      module.exports = {
        presets: [['@babel/preset-env']],
        plugins: ['@babel/plugin-transform-runtime']
      }
      

      But when looking in the built dist/vendor.xxxx.js file, I still find things like getOwnPropertySymbols which is not supported on IE11…

      Any advice much appreciated!

      posted in Help
      mesqueeb
      mesqueeb
    • RE: Drag And Drop

      Just FYI,
      I recently found this very promising vue library to add drag and drop functionality:
      https://github.com/kutlugsahin/smooth-dnd

      It seems very easy and powerful.
      I’m trying to play around with it now.

      posted in Useful Tips (NEW)
      mesqueeb
      mesqueeb
    • RE: q-table rows drag and drop

      I recently found this very promising vue library to add drag and drop functionality:
      https://github.com/kutlugsahin/smooth-dnd

      It seems very easy and powerful.
      Just throwing it out here.

      posted in Framework
      mesqueeb
      mesqueeb
    • RE: Drag and drop in Qtable, did anyone succeed?

      I recently found this very promising vue library to add drag and drop functionality:
      https://github.com/kutlugsahin/smooth-dnd

      It seems very easy and powerful.

      posted in Help
      mesqueeb
      mesqueeb
    • RE: Drag And Drop

      Hi everyone. I made the draggable extension for a project of mine about a year ago.

      The downsides of my extension were:

      • I only ever required being able to drag rows. Not “any component to any other location”.
      • I never found out why it didn’t work on macOS
      • I learned a lot since I first made it, and would do it all different now… 😛

      The project is still a side project, and I plan to start working on it again somewhere this year. At that time I was planning to rewrite it from scratch with the new Vue 3 composition api; better separation of code; TypeScript.

      But I think until that time many more devs need drag and drop for a variety of reasons, so I wanted to give some advice:

      • Whenever you start building it, use the quasar-starter-kit-ui it’s really good for modular components complete with a demo project for you to HMR test your standalone component you’re building.
      • When you start building the ui component, you can try to get ppl involved via discord so the community could work together.
      • You’ll most likely track the mouse position to calculate the css of the element you’re dragging, to calculate where to drop the element and how the UI should look, I’d suggest try using the on-mouseover directive.
      • Try to immediately set up a demo with numerous test items to drag. To see if it’s performant. I had a problem where it became slow after 300+ items, but it was too late because I always tested with about 10 items.
      posted in Useful Tips (NEW)
      mesqueeb
      mesqueeb
    • RE: Quasarians in Action #9. With Staff Pick of the Week!

      Hurray!!!

      posted in Useful Tips (NEW)
      mesqueeb
      mesqueeb
    • Scan tools to know what code is not supported on what browsers? (IE)

      I’m building a Quasar app for a client and they said not to use Css Grid for IE browser compatibility reasons.

      However, I almost tried using css filter!!! Until I thought "no let’s check on caniuse.com.

      So now I’m wondering, should I be checking all my css manually to see what’s supported and what’s not?

      Does anyone know a tool that can look through my vue & stylus files for me and tell me about this instead?

      I’m sure any dev who does client work needs this, so there must be something out there!!!

      posted in Framework
      mesqueeb
      mesqueeb