nash403 / fine-mq Goto Github PK

• I'm submitting a ...
  [x] question about how to use this project

• Summary
  The Readme tells me that I have the following three instances available:

// Three reactive properties will then be available on Vue instances:
// - $mq is an object that contains the matching state for each alias in the form { [alias]: true/false }.
// - $lastActiveAlias will contain the last alias that was matched and triggered by the listener.
// - $fineMq is a FineMq instance for advanced usages.

Now I can access
context.root.$mq and context.root.$lastActiveAlias but I can't access
context.root.$fineMq because this is undefined.

I am using fineMq as a plugin and I would like to register an .on callback, now I don't really know how I could register that..

import Vue from 'vue'
import FineMq from 'fine-mq'

Vue.use(FineMq, {
  aliases: {
    mobile: 574,
    tablet: [575, 1024],
    mobilefooter: 1024,
    desktop: [1025, 1279],
    mobilenav: 1279,
    widescreen: [1280, 1365],
    ipadpro: [1366],
    landscape: '(orientation: landscape)'
  }

And than later on within a composable of my composition api I would like to register this .on callback, but I don't know how to achieve that.

Help is very welcome. Thank you in advance.

Cheers

Example

For default aliases, it would generate for example the following queries:

{
  sm: '(max-width: 680px)',
  'sm+': '(min-width: 681px)',
  md: '(min-width: 681px) and (max-width: 1024px)',
  'md-': '(max-width: 1024px)',
  'md+': '(min-width: 1025px)',
  'md!': '(min-width: 681px)',
  lg: '(min-width: 1025px)',
  'lg-': '(max-width: 1024px)',
  landscape: '(orientation: landscape)',
  an_alias_name: 'screen and (min-width: 380px) and (max-width: 768px)'
}

Special rules

It wouldn't generate a «-» modifier for sm because it's lower bound is 0.
But lg- is generated for lg because lg's upper bound is Infinty.