Front API
window.frontApi.initAll()
Глобальная инициализация
window.frontApi.initAll()
Вызывает initAll() у всех доступных компонентов.
window.frontApi.initAll()Tabs API
Смотри консоль
window.frontApi.tabs.init()
Инициализирует табы по селектору/элементу.
window.frontApi.tabs.init('[data-tabs="example-tabs"]')window.frontApi.tabs.initAll()
Инициализирует все табы на странице по [data-tabs].
window.frontApi.tabs.initAll()window.frontApi.tabs.setActive()
Активирует таб по индексу, id или элементу.
window.frontApi.tabs.setActive('[data-tabs="example-tabs"]', 1)window.frontApi.tabs.getActive()
Получает активный таб внутри группы.
window.frontApi.tabs.getActive('[data-tabs="example-tabs"]')window.frontApi.tabs.reinit()
Переинициализирует табы с новыми опциями.
window.frontApi.tabs.reinit('[data-tabs="example-tabs"]', {
lazy: true
})window.frontApi.tabs.onAnyInit()
Подписка на инициализацию любых табов.
window.frontApi.tabs.onAnyInit(t => console.log('[init]', t))window.frontApi.tabs.onAnyChange()
Подписка на переключение любых табов.
window.frontApi.tabs.onAnyChange(({ activeTab }) => console.log('[change]', activeTab))window.frontApi.tabs.instances
Получить все текущие инстансы табов.
console.log(window.frontApi.tabs.instances)Accordion API
Смотри консоль
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente quia doloremque minima quos natus ullam praesentium hic, deserunt impedit sunt, eligendi vero maiores quis commodi illo culpa quisquam! Corrupti, quae!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi eveniet culpa neque facere accusamus eius? Excepturi assumenda ullam pariatur recusandae quae nulla sunt repellat, numquam vero, vel quam, eveniet porro!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae eius vitae iste unde quo dolorem commodi facere ab? Aut consequatur magni dolorum dolor unde alias voluptatem et eveniet temporibus ipsam!
window.frontApi.accordion.init()
Инициализирует аккордеон по селектору/элементу.
window.frontApi.accordion.init('[data-accordion-container]')window.frontApi.accordion.initAll()
Инициализирует все аккордеоны на странице.
window.frontApi.accordion.initAll()window.frontApi.accordion.reinit()
Переинициализирует аккордеон по селектору/элементу.
window.frontApi.accordion.reinit('[data-accordion-container]')window.frontApi.accordion.reinitAll()
Переинициализирует все аккордеоны на странице.
window.frontApi.accordion.reinitAll()window.frontApi.accordion.open()
Открывает указанный аккордеон.
window.frontApi.accordion.open('#ac0')window.frontApi.accordion.openAll()
Открывает все аккордеоны.
window.frontApi.accordion.openAll()window.frontApi.accordion.close()
Закрывает указанный аккордеон.
window.frontApi.accordion.close('#ac0')window.frontApi.accordion.closeAll()
Закрывает все аккордеоны.
window.frontApi.accordion.closeAll()window.frontApi.accordion.getInstance()
Получает инстанс аккордеона.
window.frontApi.accordion.getInstance('#ac1')window.frontApi.accordion.getElementInstance()
Получает инстанс элемента аккордеона.
window.frontApi.accordion.getElementInstance('#ac1')window.frontApi.accordion.on()
Подписка на события аккордеона.
window.frontApi.accordion.on('open', el => console.log('Opened:', el.dataset.accordion))
window.frontApi.accordion.on('close', el => console.log('Closed:', el.dataset.accordion))window.frontApi.accordion.off()
Отписка от событий аккордеона.
window.frontApi.accordion.off('open', callback)
window.frontApi.accordion.off('close', callback)Toast API
Смотри консоль
window.frontApi.toast.init()
Создаёт новый toast по node-элементу.
const node = document.querySelector('#toast-success').cloneNode(true)
window.frontApi.toast.init({ node, duration: 3000, position: 'right' }).show()window.frontApi.toast.show()
Показывает toast по селектору или создает временный.
window.frontApi.toast.show('#toast-error')
window.frontApi.toast.show({ text: 'Временный toast', duration: 3000 })window.frontApi.toast.hide()
Программно скрывает toast по элементу или селектору.
window.frontApi.toast.hide('#toast-success')window.frontApi.toast.get()
Получить экземпляр toast по DOM-элементу или селектору.
const instance = window.frontApi.toast.get('#toast-success')
console.log(instance)window.frontApi.toast.reinit()
Переинициализация toast с сохранением или обновлением опций.
window.frontApi.toast.reinit('#toast-success', {
duration: 4000,
gravity: 'bottom'
})window.frontApi.toast.initAll()
Инициализирует все элементы с data-toast в DOM.
window.frontApi.toast.initAll()window.frontApi.toast.onAnyInit()
Подписка на инициализацию любого window.frontApi.toast.
window.frontApi.toast.onAnyInit(t => console.log('[init]', t))window.frontApi.toast.onAnyOpen()
Подписка на открытие любого window.frontApi.toast.
window.frontApi.toast.onAnyOpen(t => console.log('[open]', t))window.frontApi.toast.onAnyClose()
Подписка на закрытие любого window.frontApi.toast.
window.frontApi.toast.onAnyClose(t => console.log('[close]', t))Работа с формами
window.frontApi.form
| Метод | Описание | Параметры | Возвращаемое значение | Пример |
|---|---|---|---|---|
| window.frontApi.form.validateForm(target) |
Принудительная валидация всех полей формы. Показывает ошибки для невалидных полей.
Внимание: вызывает показ ошибок на форме!
|
target: string | HTMLFormElement - селектор формы или DOM-элемент
|
boolean - true если все поля валидны, иначе false
|
|
| window.frontApi.form.isValidForm(target) |
Проверяет валидность всех полей формы без показа ошибок.
Без побочных эффектов - не показывает ошибки
|
target: string | HTMLFormElement - селектор формы или DOM-элемент
|
boolean - true если все поля валидны, иначе false
|
|
| window.frontApi.form.setFormError(target, message, errorEl?) | Устанавливает общую ошибку формы (не привязанную к конкретному полю) |
|
void | |
| window.frontApi.form.resetFormError(target) | Сбрасывает общую ошибку формы (установленную через setFormError) |
target: string | HTMLFormElement - селектор формы или DOM-элемент
|
void | |
| window.frontApi.form.resetFormFieldsErrors(target) | Сбрасывает ВСЕ ошибки полей формы |
target: string | HTMLFormElement - селектор формы или DOM-элемент
|
void | |
| window.frontApi.form.validateField(target) |
Принудительная валидация конкретного поля формы. Показывает ошибку, если поле
невалидно.
Показывает ошибку при невалидности
|
target: string | HTMLInputElement - селектор поля или DOM-элемент
|
boolean - true если поле валидно, иначе false
|
|
| window.frontApi.form.setFormFieldError(target, message) | Устанавливает кастомное сообщение об ошибке для конкретного поля |
|
void | |
| window.frontApi.form.resetFormFieldErrors(target) | Сбрасывает ошибку для конкретного поля |
target: string | HTMLInputElement - селектор поля или DOM-элемент
|
void | |
| window.frontApi.form.initAll() | Инициализирует или переинициализирует все формы на странице. Полезно при динамическом добавлении форм. | Нет параметров | void |
Примеры ModalApi
Смотрите консоль при клике на кнопки
modals.init(selector)
modal.init('[data-modal="modal-1"]')modals.initAll()
modal.initAll()modals.show(selector)
modal.show('[data-modal="modal-1"]')modals.hide(selector)
modal.hide('[data-modal="modal-1"]')modals.destroy(selector)
modal.destroy('[data-modal="modal-1"]')modals.destroyAll()
modal.destroyAll()modals.get(selector)
console.log(modal.get('[data-modal="modal-1"]'))Select API
Смотри консоль
window.frontApi.select.init()
Инициализация select по селектору.
window.frontApi.select.init('#tomSelect1')
window.frontApi.select.initAll()
Инициализация всех select на странице.
window.frontApi.select.initAll()
window.frontApi.select.reInit()
Переинициализация select с новыми опциями.
window.frontApi.select.reInit('#tomSelect1')
window.frontApi.select.reInitAll()
Переинициализация всех select на странице.
window.frontApi.select.reInitAll()
window.frontApi.select.destroy()
Удаление экземпляра select.
window.frontApi.select.destroy('#tomSelect1')
window.frontApi.select.getCurrentOption()
Получить выбранные опции.
console.log(window.frontApi.select.getCurrentOption('#tomSelect1'))
window.frontApi.select.addOption()
Добавить новую опцию.
window.frontApi.select.getInstance('#tomSelect1')?.addOption({ value: '4', label: 'New 4' })
window.frontApi.select.removeOption()
Удалить опцию по значению.
window.frontApi.select.getInstance('#tomSelect1')?.removeOption('2')
window.frontApi.select.removeAllOptions()
Удалить все опции.
window.frontApi.select.removeAllOptions('#tomSelect2')
window.frontApi.select.resetOptions()
Полная замена опций.
window.frontApi.select.resetOptions('#tomSelect1', [{ value: 'new1', label: 'New 1' }, { value: 'new2', label: 'New 2' }], 'new1')
window.frontApi.select.getValue()
Получить текущее значение.
console.log(window.frontApi.select.getValue('#tomSelect1'))
window.frontApi.select.setValue()
Установить значение select.
window.frontApi.select.setValue('#tomSelect2', ['a', 'c'])
window.frontApi.select.isInit()
Проверить, инициализирован ли select.
console.log(window.frontApi.select.isInit('#tomSelect1'))
window.frontApi.select.getInstance()
Получить инстанс TomSelect.
console.log(window.frontApi.select.getInstance('#tomSelect1'))
Работа с тултипами
window.frontApi.toolti
Как выглядит вызов тултипа
<Tooltip content="Укажите количество виртуальных процессоров" placement="top">Наведи на меня</Tooltip>Какие пропсы за что отвечают
-
placement=[top|right|bottom|left]- место расположения content- текст тултипа
| Метод | Описание | Параметры | Возвращает | Пример |
|---|---|---|---|---|
| window.frontApi.tooltip.init(target) | Инициализирует tooltip для элемента. Добавляет атрибут data-tooltip-init |
target: string | HTMLElement - селектор тултипа или DOM-элемент |
void |
|
| window.frontApi.tooltip.reInit(target) | Переинициализирует tooltip | target: string | HTMLElement - селектор тултипа или DOM-элемент |
void |
|
| window.frontApi.tooltip.destroy(target) | Удаляет tooltip | target: string | HTMLElement - селектор тултипа или DOM-элемент |
void |
|
| window.frontApi.tooltip.show(target) | Отображает tooltip | target: string | HTMLElement - селектор тултипа или DOM-элемент |
void |
|
| window.frontApi.tooltip.hide(target) | Скрывает tooltip | target: string | HTMLElement - селектор тултипа или DOM-элемент |
void |
|
| window.frontApi.tooltip.isInit(target) | Проверяет, инициализирован ли tooltip | target: string | HTMLElement - селектор тултипа или DOM-элемент |
boolean |
|
| window.frontApi.tooltip.initAll() | Инициализирует tooltips для всех элементов | - | void |
|
| window.frontApi.tooltip.destroyAll() | Удаляет все tooltips | - | void |
|
| window.frontApi.tooltip.reInitAll() | Переинициализирует все tooltips | - | void |
|
| window.frontApi.tooltip.getInstance(target) | Возвращает экземпляр tooltip | target: string | HTMLElement - селектор тултипа или DOM-элемент |
TooltipInstance | null |
|
| window.frontApi.tooltip.getElement(target) | Возвращает DOM-элемент tooltip | target: string | HTMLElement - селектор тултипа или DOM-элемент |
HTMLElement | null |
Работа с range
window.frontApi.range
Какие пропсы за что отвечают
-
id- идентификатор maxLength- максимальная длина инпута в символахoneSided- false, если двусторонний, true - одностороннийdata-step- шагmin- минимальная границаmax- максимальная границаstartMin- стартовое минимальное значение-
startMax- стартовое максимальное значение (для одностороннего range указывать не нужно)
Как выглядит вызов одностороннего range
<Range id="range2" maxLength=10 oneSided=true data-step=10 min=0 max=1024 startMin=520 />
Как выглядит вызов двустороннего range
<Range id="range1" maxLength=10 oneSided= data-step=100 min=0 max=1024 startMin=520 startMax=1024 />
| Метод | Описание | Параметры | Возвращает | Пример |
|---|---|---|---|---|
| window.frontApi.range.initAll() | Инициализация всех range Добавляет атрибут data-range-init |
- | void |
|
| window.frontApi.range.isInit(target) | Проверка инициализации | target: string | HTMLElement - селектор или DOM-элемент |
boolean - true, если инициализирован |
|
| window.frontApi.range.getInitializedAttribute(target) | Получение атрибута инициализации | target: string | HTMLElement - селектор или DOM-элемент |
string | null - значение атрибута или null |
|
| window.frontApi.range.reInit(target) | Переинициализация range | target: string | HTMLElement - селектор или DOM-элемент |
void |
|
| window.frontApi.range.reInitAll() | Переинициализация всех range | - | void |
|
| window.frontApi.range.findElement(target) | Нахождение DOM-элемента range | target: string | HTMLElement - селектор или DOM-элемент |
HTMLElement | null - найденный элемент или null |
|
| window.frontApi.range.setBorderMinRangeValue(target, value) | Установка минимальной границы | target: string | HTMLElement - селектор или DOM-элементvalue: Number - новое числовое значение |
void |
|
| window.frontApi.range.setCurrentMiRangeValue(target, value) | Установка текущего минимального значения | target: string | HTMLElement - селектор или DOM-элементvalue: Number - новое числовое значение |
void |
|
| window.frontApi.range.getBorderMinRangeValue(target) | Получение минимальной границы | target: string | HTMLElement - селектор или DOM-элемент |
number | null - числовое значение или null |
|
| window.frontApi.range.setBorderMaxRangeValue(target, value) | Установка максимальной границы | target: string | HTMLElement - селектор или DOM-элементvalue: Number - новое числовое значение |
void |
|
| window.frontApi.range.setCurrentMaxRangeValue(target, value) | Установка текущего максимального значения | target: string | HTMLElement - селектор или DOM-элементvalue: Number - новое числовое значение |
void |
|
| window.frontApi.range.getBorderMaxRangeValue(target) | Получение максимальной границы | target: string | HTMLElement - селектор или DOM-элемент |
number | null - числовое значение или null |
|
| window.frontApi.range.setCurrentMinRangeValue(target, value) (односторонний) | Установка текущего значения для одностороннего range | target: string | HTMLElement - селектор или DOM-элементvalue: Number - новое числовое значение |
void |
Работа со слайдерами
window.frontApi.swiper
Методы API
| Метод | Описание | Параметры | Возвращает | Пример |
|---|---|---|---|---|
| window.frontApi.swiper.init(target) | Инициализирует слайдер | target: string — селектор DOM-элемента |
void |
|
| window.frontApi.swiper.initAll() | Инициализирует все слайдеры | - | void |
|
| window.frontApi.swiper.reinit(target) | Переинициализирует слайдер с сохранением параметров | target: string |
void |
|
| window.frontApi.swiper.reinitAll() | Переинициализирует все слайдеры | - | void |
|
| window.frontApi.swiper.isInit(target) | Проверяет, инициализирован ли слайдер | target: string |
boolean |
|
| window.frontApi.swiper.get(target) | Возвращает экземпляр Swiper | target: string |
Swiper | undefined |
Inputmask API
Смотри консоль
window.frontApi.inputmask.init()
Инициализирует все input с data-mask-phone.
window.frontApi.inputmask.init()window.frontApi.inputmask.reinit()
Переинициализирует конкретное поле по селектору или DOM-элементу.
window.frontApi.inputmask.reinit('#reinit-input')window.frontApi.inputmask.reinitAll()
Переинициализирует все input'ы, уже инициализированные ранее.
window.frontApi.inputmask.reinitAll()Datepicker API
Смотри консоль. По умолчанию доступны все даты, начиная с сегодняшнего
window.frontApi.datepicker.init()
Инициализация datepicker по селектору.
window.frontApi.datepicker.init('#calendar1')window.frontApi.datepicker.initAll()
Инициализация всех datepicker на странице.
window.frontApi.datepicker.initAll()window.frontApi.datepicker.reinit()
Реинициализация одного календаря с новыми опциями.
window.frontApi.datepicker.reinit('#calendar1', { enableDates: ['2025-09-10:2025-09-20'] })window.frontApi.datepicker.reinitAll()
Реинициализация всех datepicker с новыми опциями.
window.frontApi.datepicker.reinitAll({ enableDates: ['2025-09-10:2025-09-20'] })window.frontApi.datepicker.destroy()
Уничтожение datepicker по селектору.
window.frontApi.datepicker.destroy('#calendar1')window.frontApi.datepicker.destroyAll()
Уничтожение всех datepicker на странице.
window.frontApi.datepicker.destroyAll()window.frontApi.datepicker.setAvailableDates()
Установка доступных дат/диапазонов.
window.frontApi.datepicker.setAvailableDates('#calendar1', ['2025-09-15', '2025-09-18:2025-09-22'])window.frontApi.datepicker.setUnavailableDates()
Установка недоступных дат/диапазонов.
window.frontApi.datepicker.setUnavailableDates('#calendar1', ['2025-09-17', '2025-09-20:2025-09-21'])window.frontApi.datepicker.setOnlyAvailableDates()
Включающий режим: разрешает ТОЛЬКО указанные даты, блокирует все остальные.
window.frontApi.datepicker.setOnlyAvailableDates('#calendar1', ['2025-09-15', '2025-09-18:2025-09-22'])
window.frontApi.datepicker.setOnlyUnavailableDates()
Исключающий режим: блокирует ТОЛЬКО указанные даты, разблокирует все остальные.
window.frontApi.datepicker.setOnlyUnavailableDates('#calendar1', ['2025-09-10', '2025-09-12'])window.frontApi.datepicker.selectDate()
Программный выбор даты.
window.frontApi.datepicker.selectDate('#calendar1', '2025-09-19')window.frontApi.datepicker.isInit()
Проверка инициализации datepicker.
console.log(window.frontApi.datepicker.isInit('#calendar1'))window.frontApi.datepicker.getInstance()
Получение экземпляра datepicker.
console.log(window.frontApi.datepicker.getInstance('#calendar1'))