AEToolsLib

Библиотека компонентов проектов Авто-Евро

Vue v2.6 NodeJs v14.19.1

Список компонентов и их краткое описание

• AEAddressSelection - компонент кнопки вызова попапа пункта доставки и самовывоза (документация)
• AEAddressSelectionPopup - компонент попапа пункта доставки и самовывоза (документация)
• AECategoriesButton - компонент попапа пункта доставки и самовывоза (документация)
• AECategories - компонент попапа пункта доставки и самовывоза (документация)
• AEMobileHeaderNavigation - компонент попапа пункта доставки и самовывоза (документация)
• AEProductsSearchButton - Компонент для открытия или скрытия нижней части header в мобильной версии сайта (документация)

Подключение

Подключить пакет в проект

Выполнить команду npm i @auto-euro/ae-tools-lib или yarn add @auto-euro/ae-tools-lib.

Подключить компонент

Импортировать нужный компонент и метод, конфигурирующий библиотеку

import { getAeToolsLibConfig, AETestLib } from '@auto-euro/ae-tools-lib';

На mount компонента, вызвать метод и передать в него настройки:

getAeToolsLibConfig({
  SHOP_BACKEND_API_HOST: урл апи проекта шоп,
  SHIPMENT_API: урл апи сервиса shipment
  YANDEX_API_KEY: ключ апи яндекс-карт
  DADATA_API_HOST: урл апи dadata,
  DADATA_API_KEY: ключ апи dadata,
})

Подключить компонент AETestLib как обычно

Подключить файл стилей, если нужно

import '@auto-euro/ae-tools-lib/dist/ae-tools-lib.css';

Подключить модуль vuex

В проекте нет собственного хранилища vuex, но есть модули, которые нужно импортировать в хранилище проекта. В проекте в корневом файле index.js хранилища, импортировать нужный модуль. Например:

import { aeAddressSelectionStore } from '@auto-euroae-tools-lib'

И зарегистрировать его как модуль хранилища:

  modules: {
    ...
    остальные модули хранилища
    ...
    aeAddressSelection: aeAddressSelectionStore()
  }

Подключить пакет для локальной разработки/тестирования

NPM

• Перейти в папку пакета и выполнить команду npm link.

• В проекте, в котором нужно подключить локальную версию проекта, в директории с package.json файлом выполнить команду npm link.

Для отключения локального пакета, выполнить команду npm unlink.

Yarn

Перейти в папку пакета и выполнить команду yarn link.

• В проекте, в котором нужно подключить локальную версию проекта, в директории с package.json файлом выполнить команду yarn link "@auto-euro/ae-tools-lib".

Для отключения локального пакета, выполнить команду yarn unlink "@auto-euro/ae-tools-lib".

Сборка на windows

Для сборки на windows необходимо из файлы package.json скопировать scripts

Версионирование пакета

Пакет лежит в директории компании "https://www.npmjs.com/settings/auto-euro/packages"; Для работы с пакетом (обновление/удаление), необходимо:

• иметь учетную запись на сайте "https://www.npmjs.com";
• учетная запись должна быть добавлена в комманду разработки пакета auto-euro (необходимо обратиться к владельцу пакета);
• быть авторизованным - выполнить в терминале команду npm login и ввести учетные данные.

Для обновления версии пакета, необходимо:

• Перед мержем изменений в код, выполнить команду npm version <номер версии в формате [ major | minor | patch ]> (на данном этапе все изменения в коде должны быть закомичены). Закоммитить изменение версии и запушить в репозиторий.
• Выполнить команду npm run build.
• Выполнить команду npm publish --access public.

AEAddressSelection

Компонент кнопки открытия модального окна адресов, передавать ничего не надо, событий нет. Вся логика инкапсулирована внутри за счет VueX модуля aeAddressSelection

AEAddressSelectionPopup

PROPS

emits

• closeHeaderSearch - поднять до ближайшего проектного компонента, в нем вызвать eventBus.$emit('shipping-popup-select', value);
• clickOnLink - поднять до ближайшего проектного компонента, в нем сделать редирект на урл

AECategoriesButton

Компонент для открытия списка категорий каталога. Входящих свойств нет.

emits

• clickOnCatalogueButton поднимает до ближайшего родителя факт клика по кнопке

AECategories

Компонент блока категорий каталога.

PROPS

Emits

• clickOnLink поднимает событие до ближайшего родителя для редиректа на страницу рубрики, содержит path c типом String
• closeCategoryList поднимает событие до ближайшего родителя по факту клика на кнопку закрытия блока категорий.

AEMobileHeaderNavigation

Компонент мобильного меню навигации

PROPS

Emits

• clickOnLink - поднимает событие до ближайшего родителя для редиректа, содержит path c типом String

AEProductsSearchButton

Компонент для открытия или скрытия нижней части header в мобильной версии сайта

PROPS

Emits

• click - поднимает до ближайшего родителя факт клика по кнопке