import cookie from 'js-cookie' ; import Vue from 'vue' ; /**
 * Viewport module.
 */ export type ViewportModule = { /**
     * Current breakpoint.
     */ readonly breakpoint : string ; param searchBreakpoint isGreaterThan : ( searchBreakpoint : string ) => Boolean ; param searchBreakpoint isGreaterOrEquals : ( searchBreakpoint : string ) => Boolean ; param searchBreakpoint isLessThan : ( searchBreakpoint : string ) => Boolean ; param breakpointToMatch match : ( breakpointToMatch : string ) => Boolean ; param breakpointsToMatch matches : ( ... breakpointsToMatch : string [ ] ) => Boolean ; } ; /**
 * Viewport options.
 */ export type ViewportOptions = { /**
     * Breakpoints.
     */ breakpoints : { [ key ] : number ; } ; /**
     * Cookie name.
     *
     * Default: "viewport".
     */ cookieName : string ; /**
     * Default breakpoints based on device type for auto detection.
     *
     * Available devices: "console", "desktop", "embedded", "mobile", "smarttv", "tablet", "wearable".
     */ defaultBreakpoints : { [ key ] : string ; } ; /**
     * Fallback breakpoint.
     */ fallbackBreakpoint : string ; } ; /**
 * Viewport query.
 */ export type ViewportQuery = { /**
     * CSS media query.
     */ mediaQuery : string ; /**
     * Size.
     */ size : number ; } ; const export const DEFAULT_OPTIONS = { breakpoints : { desktop : 1024 , desktopMedium : 1280 , desktopWide : 1600 , mobile : 320 , mobileMedium : 375 , mobileWide : 425 , tablet : 768 , } , cookieName : 'viewport' , defaultBreakpoints : { desktop : 'desktop' , mobile : 'mobile' , tablet : 'tablet' , } , fallbackBreakpoint : 'desktop' , } ; /**
 * Detects the breakpoint based on Cookie & User-Agent.
 */ export async function detectBreakpoint ( this , cookie ? , userAgent ? ) { try { if ( cookie && cookie in this . breakpoints ) { return cookie ; } const { default : UAParser } = await import ( 'ua-parser-js' ) ; const parser = new UAParser ( userAgent ) ; const { type : deviceType = '' } = parser . getDevice ( ) ; if ( deviceType in this . defaultBreakpoints ) { return this . defaultBreakpoints [ deviceType ] ; } return this . fallbackBreakpoint ; } catch ( error ) { console . error ( error ) ; return this . fallbackBreakpoint ; } } /**
 * Returns the viewport instance.
 */ export function useViewport ( options , breakpoint ) { const instance = new Vue ( { data ( ) { return { breakpoint , } ; } , computed : { /**
             * Array of queries.
             */ _queries ( ) { const { breakpoints = { } } = options ; const breakpointsKeys = Object . keys ( breakpoints ) . sort ( ( a , b ) => breakpoints [ a ] - breakpoints [ b ] ) ; const queries = { } ; let i = breakpointsKeys . length ; while ( i -- ) { const currentKey = breakpointsKeys [ i ] ; const size = breakpoints [ currentKey ] ; const nextSize = breakpoints [ breakpointsKeys [ i + 1 ] ] ; let mediaQuery = '' ; if ( i > 0 ) { mediaQuery = `(min-width: ${ size }px)` ; } else { mediaQuery = `(min-width: 1px)` ; } if ( nextSize ) { mediaQuery += ` and (max-width: ${ nextSize - 1 }px)` ; } queries [ currentKey ] = { mediaQuery , size , } ; } return queries ; } , } , created ( ) { if ( process . server ) { return ; } window . onNuxtReady ( ( ) => { for ( const queryKey in this . _queries ) { const { mediaQuery } = this . _queries [ queryKey ] ; const mediaQueryList = window . matchMedia ( mediaQuery ) ; if ( mediaQueryList . matches ) { this . _setBreakpoint ( queryKey ) ; } mediaQueryList . onchange = ( event ) => { if ( ! event . matches ) { return ; } this . _setBreakpoint ( queryKey ) ; } ; } } ) ; } , methods : { param breakpoint _setBreakpoint ( breakpoint ) { this . breakpoint = breakpoint ; cookie . set ( options . cookieName , breakpoint , { expires : 365 , sameSite : 'strict' , } ) ; } , param searchBreakpoint isGreaterThan ( searchBreakpoint ) { const keys = Object . keys ( this . _queries ) ; const currentIndex = keys . indexOf ( this . breakpoint ) ; const breakpointIndex = keys . indexOf ( searchBreakpoint ) ; if ( breakpointIndex === - 1 ) { return false ; } return breakpointIndex > currentIndex ; } , param searchBreakpoint isGreaterOrEquals ( searchBreakpoint ) { return this . isGreaterThan ( searchBreakpoint ) || this . match ( searchBreakpoint ) ; } , param searchBreakpoint isLessThan ( searchBreakpoint ) { const keys = Object . keys ( this . _queries ) ; const currentIndex = keys . indexOf ( this . breakpoint ) ; const breakpointIndex = keys . indexOf ( searchBreakpoint ) ; if ( breakpointIndex === - 1 ) { return false ; } return breakpointIndex < currentIndex ; } , param breakpointToMatch match ( breakpointToMatch ) { return this . breakpoint === breakpointToMatch ; } , param breakpointsToMatch matches ( ... breakpointsToMatch ) { return breakpointsToMatch . includes ( this . breakpoint ) ; } , } , } ) ; return instance ; }