MqHandler

MqHandler - модуль для упрощения работы с глобальными breakpoints

Основой модуля является одноименный класс MqHandler, создающий из объекта breakpoints соответствущие реактивные свойства

Module options

breakpoints

• type: Record<string, number>
• default: default-breakpoints.json

Объект breakpoints, где в качестве ключей задаются название breakpoints, а значения - числа, соответствущие ширине экрана в px. В качестве дефолтного значения берется файл default-breakpoints.json из папки модуля. При инициализации создается экземпляр класса MqHandler, а после mount приложения происходит установка слушателей для breakpoints. Экземпляр класса доступен через свойство $mq.

Class MqHandler

Properties

breakpoints

• type: Record<string, number>
• default: {}

Свойство, идентичное вышеупомянутому одноименному свойству.

breakpointNames

• type: string[]

Список названий текущий breakpoints.

currentState

• type: Reactive<Record<keyof Breakpoints, Record<'max' | 'min', boolean>>>

Текущее состояние breakpoints.

isSet

• type: Ref<boolean>

Свойство, определяющее, были ли установлены слушатели для breakpoints или нет

aggregativeListeners

• type: Reactve<Record<string, ({matches: boolean; queryString: string}) => any>>

Reactive объект слушателей для использующихся в текущий момент времени queryString.

callbacks

• type: Record<string, Array<({matches: boolean; queryString: string}) => any>>

Объект callbacks, соответствующих определенным queryString. Данное свойство необходимо для оптимизации работы с непосредственными слушателями для mediaQuery, чтобы не привязывать каждый callback к mediaQuery, а иметь один слушатель, в котором будут вызываться все callbacks.

Methods

setupBreakpointCallbacks

• type: () => void

Метод, для установки всех необходимых слушателей. Вызывается в модуле при mount всего приложения. В результате isSet проставляется на true

removeBreakpointCallbacks

• type: () => void

Данный метод аналогичен предыдущему методу с одним единственным отличием: он работает в обратном порядке.

addCallback

• type: (queryString:string, cb: ({matches: boolean; queryString: string}) => any) => void

Метод для добавления callback для определенного queryString. В случае отсутствия слушателя для queryString, создается соответствущий aggregativeListener

removeCallback

• type: (queryString:string, cb: ({matches: boolean; queryString: string}) => any) => void

Метод для удаления callback для определенного queryString. Если список callbacks пуст для queryString, то aggregativeListener удаляется

static extend

• type: <Bps extends Record<string, number>>(breakpoints: Bps) => MqHandler<Bps>

Статичный метод инициализации MqHandler для корректного type inference.

Composition

useMqHandler

• type: <Bps extends Record<string, number>>() => MqHandler<Bps>

Возвращает экземпляр MqHandler в текущем приложении. Данный хук следует вызывать только в компонентах. В противном случае возникнет ошибка.

onMediaQueryChange

• type: (queryString:string, cb: ({matches: boolean; queryString: string}) => any) => void

Хук для добавления слушателя для кастомного queryString. Принцип работы состоит в добавления хука в onMounted и его снятия в onUnmounted.

Vue install

Vue 2

// main.js
import Vue from 'vue';
import { Plugin } from 'shared-front/lib/modules/mq-handler';

Vue.use(Plugin, {
  breakpoints: {
    lg: 1200,
    md: 700,
    sm: 500,
  }
});

Vue 3

// main.ts
import { createApp } from 'vue';
import { Plugin } from 'shared-front/lib/modules/mq-handler';

import App from './App.vue';

const app = createApp(App);

app.use(Plugin, {
  breakpoints: {
    lg: 1200,
    md: 700,
    sm: 500,
  }
});

Plugin options

breakpoints

• type: Record<string, number>
• default: {}

Объект breakpoints, где в качестве ключей задаются название breakpoints, а значения - числа, соответствущие ширине экрана в px.

Usage

<template>
  <div class="app">
    App has {{ screenSize }} screen
  </div>
</template>

<script>
import { ref, computed } from 'vue';

import useMqHandler from 'shared-front/lib/modules/mq-handler/use-mq-handler';

import breakpoints from './breakpoints.json';

export default {
  setup() {
    const $mq = useMqHandler<typeof breakpoints>();

    const screenSize = computed(() => $mq['max-sm'].value ? 'small' : 'large');

    return {
      screenSize,
    };
  },
};
</script>