[Feature request] $mq should work as a function

[AndrewBogdanovTSS]

Right now $mq is just a string - that is limiting its behavior significantly. I suggest to turn it into a function that could accept a string. That will enable true mobile-first experience. If an argument of specified breakpoint is passed - it should return true if it's currently within that breakpoint.
If a minus is added to the string - it will also include every breakpoint below the specified one.
If a plus is added to the string - it will also include every breakpoint above the specified one. Something like:

this.$mq('md') // will return true if screen width is == 'md'
this.$mq('md-') // will return true if screen width is <= 'md'
this.$mq('md+') // will return true if screen width is >= 'md'
this.$mq() // will return current breakpoint similar to how it's working now

[resu511]

Hello,
To achieve what you describe while not modifying the whole thing, I personally just defined my breakpoints starting from the letter of the latin alphabet, so that the comparison with > and < would work :

breakpoints: {
      a_xxs: 320,
      b_xs: 481,
      c_sma: 640,
      c_smb: 768,
      d_md: 1024,
      e_lg: 1280,
      f_xl: 1440,
      g_xxl: Infinity
 }

Salute

[madebycaliper]

@AndrewBogdanovTSS I totally agree..I love this package but it's sometimes a nightmare to use. I often use these two patterns:

['xs','sm'].includes($mq)`
// and
!['md','lg','xl'].includes($mq)

usage in templates like :

<component :class="[{ 'someClass': ['xs'].includes($mq) }]" />

you can wrap those statements into computed properties and I've even considered writing a mixin or attaching them to the Vue.prototype obj.

[AndrewBogdanovTSS]

I guess the best solution would be a PR to this package 🙂

[madebycaliper]

Yea! @AlexandreBonaventure doesn't seem to be responding to community efforts. There are 11 PRs waiting to be approved...maybe its time someone forks this to an actively-maintained repo...?