auto-euro components lib
npm install @auto-euro/ae-tools-libAEAddressSelection` - компонент кнопки вызова попапа пункта доставки и самовывоза (документация)
- `AEAddressSelectionPopup` - компонент попапа пункта доставки и самовывоза (документация)
- `AECategoriesButton` - компонент попапа пункта доставки и самовывоза (документация)
- `AECategories` - компонент попапа пункта доставки и самовывоза (документация)
- `AEMobileHeaderNavigation` - компонент попапа пункта доставки и самовывоза (документация)
Подключение
$3
Выполнить команду npm i @auto-euro/ae-tools-lib или yarn add @auto-euro/ae-tools-lib.
$3
Импортировать нужный компонент и метод, конфигурирующий библиотеку
`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';`
$3
В проекте нет собственного хранилища vuex, но есть модули, которые нужно импортировать в хранилище проекта.
В проекте в корневом файле index.js хранилища, импортировать нужный модуль. Например:
`import { aeAddressSelectionStore } from '@auto-euroae-tools-lib'`
И зарегистрировать его как модуль хранилища:
`
modules: {
...
остальные модули хранилища
...
aeAddressSelection: aeAddressSelectionStore()
}
`
Подключить пакет для локальной разработки/тестирования
$3
- Перейти в папку пакета и выполнить команду npm link.
- В проекте, в котором нужно подключить локальную версию проекта, в директории с package.json файлом выполнить команду npm link.
Для отключения локального пакета, выполнить команду npm unlink.
$3
Перейти в папку пакета и выполнить команду yarn link.
- В проекте, в котором нужно подключить локальную версию проекта, в директории с package.json файлом выполнить команду yarn link "@auto-euro/ae-tools-lib".
Для отключения локального пакета, выполнить команду yarn unlink "@auto-euro/ae-tools-lib".
Сборка на windows
Для сборки на windows необходимо из файлы package.json скопировать scripts
"scripts": {
"serve": "vue-cli-service serve --open",
"build": "vue-cli-service build --target lib --name ae-tools-lib \"src/index.js\"",
"build:demo": "vue-cli-service build --dest gh-pages && gh-pages -d gh-pages",
"watch": "vue-cli-service build --target lib --name ae-tools-lib \"src/index.js\" --watch --mode production"
},
Версионирование пакета
Пакет лежит в директории компании "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
Св-во
Требуемая структура для компонента
Описание
user
{
client_props: {
client_code: String
},
web_client_type: Number
}
Данные авторизированного пользователя, по умолчанию: {}
iconsForPlacemarks
{
common: String,
red: String,
default: String,
clicked: String
}
Объект с SVG для меток карты
countryCode
String
Код страны, по умолчанию: 'RU'
isImpersonate
Boolean
Признак определяющий права пользователя на добавление телефона без подтверждения его SMS, по умолчанию: false
routePath
String
Роут текущей страницы, по умолчанию: '/'
isCallFromBasket
Boolean
Свойство для проверки вызван ли компонент из корзины
emits
- closeHeaderSearch - поднять до ближайшего проектного компонента, в нем вызвать eventBus.$emit('shipping-popup-select', value);
- clickOnLink - поднять до ближайшего проектного компонента, в нем сделать редирект на урл
AECategoriesButton
Компонент для открытия списка категорий каталога.
Входящих свойств нет.
emits
- clickOnCatalogueButton поднимает до ближайшего родителя факт клика по кнопке
AECategories
Компонент блока категорий каталога.
PROPS
Св-во
Требуемая структура для компонента
Описание
menuList
[
{
id: Number,
icon: String,
name String,
path: String,
subcategory: [
{
id: Number,
name String,
path: String,
},
],
},
]
Массив объектов с данными рубрики, который содержит массив объектов с данными подрубрики.
Значение по умолчанию: []
Emits
- clickOnLink поднимает событие до ближайшего родителя для редиректа на страницу рубрики, содержит path c типом String
- closeCategoryList поднимает событие до ближайшего родителя по факту клика на кнопку закрытия блока категорий.
AEMobileHeaderNavigation
Компонент мобильного меню навигации
PROPS
Св-во
Требуемая структура для компонента
Описание
isManager
Boolean
Значение по умолчанию: false
isUserImpersonate
Boolean
Является ли пользователь переключаемым.
Значение по умолчанию: false
user
{
client_props: {
client_code: String,
client: String,
},
}
Данные авторизированного пользователя.
Значение по умолчанию: {}
synchronization
Boolean
Является ли пользователь перенесенным со старого сайта.
isShowConfirmation
Boolean
Является ли пользователь подтвержденным.
Значение по умолчанию: false
catalogList
[
{
id: Number,
icon: String,
name String,
path: String,
subcategory: [
{
id: Number,
name String,
path: String,
},
],
},
]
Массив объектов с данными рубрики, который содержит массив объектов с данными подрубрики.
Значение по умолчанию: []
Emits
- clickOnLink - поднимает событие до ближайшего родителя для редиректа, содержит path c типом String`