Vue directives

 Vue.directive('click-outside', {
  bind(el, binding, vnode) {
    el.clickOutside = event => {
      if (!(el === event.target || el.contains(event.target))) {
        vnode.context[binding.expression](event);
      }
    };
    document.body.addEventListener('click', el.clickOutside);
    document.body.addEventListener('touchstart', el.clickOutside);
  },
  unbind(el) {
    document.body.removeEventListener('click', el.clickOutside);
    document.body.removeEventListener('touchstart', el.clickOutside);
  }
});

Vue.directive('toggle-class', {
  bind(el, binding) {
    el.addEventListener('click', () => {
      el.classList.toggle(binding.value);
    });
  },
  unbind(el, binding) {
    el.removeEventListener('click', () => {
      el.classList.toggle(binding.value);
    });
  }
});

Vue.directive('body-overflow', {
  update(el, binding) {
    if (binding.value) {
      document.body.style.top = `-${window.scrollY}px`;
      document.body.classList.add('body-overflow');
    } else {
      const Y = document.body.style.top || `-${window.scrollY}px`;
      document.body.classList.remove('body-overflow');
      document.body.style.top = '';
      window.scrollTo(0, parseInt(Y || '0', 2) * -1);
    }
  }
});

 

npm pack for Frontend

browser-sync

npm install -g browser-sync

https://browsersync.io/

json server

npm install -g json-server

https://github.com/typicode/json-server

формат телефоного номера

'123456789'.replace(/(\d+)(\d{3})(\d{2})(\d{2})/, "$1 $2-$3-$4")

12 345-67-89