@auto-euro/ae-tools-lib NPM

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 поднимает событие до ближайшего родителя по факту клика на кнопку закрытия блока категорий.