Startup UI

Миграция на мажорную версию ​

Мажорный релиз содержит несколько ломающих изменений. Ниже — что поменялось и как обновиться.

0. Требования к окружению ​

Сначала проверьте версии зависимостей (peer dependencies) — при необходимости обновите их:

  • Vue ≥ 3.5
  • @vueuse/core ≥ 14
  • @inertiajs/vue3 2.x или 3.x — теперь опционально (см. п.6): нужен, только если регистрируете его router/Link

1. Локаль по умолчанию — английская ​

Раньше строки были русскими. Теперь дефолт — en. Заметнее всего на SDatePicker (английские названия месяцев и дней недели) и на встроенных подписях SConfirm, SPagination, SUpload, STable/SSelect.

Что сделать: для русского интерфейса задайте локаль при регистрации:

js
app.use(StartupUI, { locale: 'ru' });
// или без плагина:
import { configureStartupUi } from 'startup-ui';
configureStartupUi({ locale: 'ru' });

Подробнее — «Локализация».

2. Библиотека не везёт дефолты --s-* ​

CSS библиотеки больше не содержит значений переменных --s-* (только их использование). Приложение без своей палитры останется без цветов.

Что сделать — один из вариантов:

js
// А) подключить готовую палитру
import 'startup-ui/defaults.css';
scss
/* Б) задать свою палитру в проекте */
:root { --s-primary: #2563eb; /* ... */ }

3. SButton: снят max-width: fit-content ​

Кнопка по-прежнему сжимается по контенту (display:inline-block), но теперь ширину можно задать через style/класс. Если где-то полагались на жёсткий клэмп — проверьте вёрстку; для растягивания используйте проп fullwidth.

4. SForm: titlesWidth не влияет на титулы сверху ​

Инлайн-ширина заголовка применяется только при titles-at-left. При титулах сверху ширина больше не навязывается (это убирает лишние переносы). Обходные :titles-width="null" можно убрать.

5. SCheckboxGroup корректно эмитит update:modelValue ​

Группа чекбоксов теперь отдаёт новый массив через update:modelValue (раньше мутировала по ссылке). Если использовали обходные deep-watch или ручную кнопку Save из-за «неловящегося» изменения — это больше не нужно.

6. InertiaJS стала опциональной ​

Библиотека больше не импортирует InertiaJS статически. Компоненты, которым нужна SPA-навигация, берут роутер и компонент-ссылку из конфигурации плагина; если они не переданы — работают на нативных <a> / History API / window.location.

Затронуты:

  • SForm — декларативный сабмит (action/method) через router.visit;
  • SPagination — смена perPage (router.get) и ссылки страниц (Link);
  • SFilterGroup — bind-to-query (router.get);
  • SMenu / SVerticalMenu — ссылки пунктов меню (Link).

Что сделать: если используете Inertia, зарегистрируйте router и Link один раз при подключении плагина:

js
import StartupUI from 'startup-ui';
import { router, Link } from '@inertiajs/vue3';

app.use(StartupUI, {
    router,        // SForm-сабмит, SPagination, SFilterGroup (bind-to-query)
    link: Link,    // ссылки в меню и пагинации
});

Без регистрации:

  • ссылки меню/пагинации рендерятся как обычные <a> (полная навигация);
  • bind-to-query синхронизирует URL через History API (без серверного рефетча);
  • декларативный сабмит SForm (action/method) недоступен — используйте событие @submit.

7. FontAwesome стала опциональной ​

Собственная «обвязка» компонентов (шевроны, крестики, бургер, карет и т.п.) рисуется встроенными inline-SVG — библиотека больше не зависит от FontAwesome жёстко и не тащит её в бандл. FA нужна только там, где иконку передаёте вы через проп icon: SActionIcon, SNote, SStatus, и опционально STooltip / SDatePicker / SMenu.

Что сделать, если используете такие иконки — подключить рендерер одним из способов:

js
// А) глобально зарегистрировать FontAwesomeIcon
app.component('FontAwesomeIcon', FontAwesomeIcon);

// Б) прокинуть рендерер (или другой icon-set) при подключении плагина
app.use(StartupUI, { icon: FontAwesomeIcon });

Если ничего не подключить — компоненты без icon-пропа работают как обычно, а там, где иконку передали, она просто не отрисуется. Подробнее — «Иконки».

8. SMenu вместо SDropdownMenu и SHorizontalMenu ​

Компоненты SDropdownMenu и SHorizontalMenu удалены — их заменяет единый SMenu: горизонтальное меню с выпадающими подменю.

Что сделать: перейти на SMenu с пропом items (массив { label, url, icon, counter, active, children: [...] }). Подробнее — «SMenu».

9. SDatePicker: дни недели и месяцы — из локали ​

Пропы week-day-names и month-names убраны: названия дней и месяцев берутся из активной локали (ключи datePicker.weekDays / datePicker.months).

Что сделать: убрать эти пропы; для своих названий — переопределить ключи через configureStartupUi / messages (см. «Локализация»). Заодно у SDatePicker появились clearable и выбор времени (am/pm), а у STooltip дефолтная иконка-вопрос теперь встроенный SVG (FA для неё не нужна).

Изменения API (обратносовместимые) ​

Эти возможности добавлены без ломающих изменений, но полезны при обновлении:

  • SSelect / SRadioGroup / SCheckboxGroup: options принимает массив объектов + пропы option-label / option-value (раньше — только карта и массив пар).
  • SFormRow: привязка поля по name работает на любой глубине вложенности (поле можно обернуть в <div>).
  • SInput: проп empty-value ('' | null) для контроля пустого значения (напр. '' вместо null для NOT NULL полей).
  • SHtmlEditor: пропы init, plugins, toolbar, menubar, content-style, content-css, header-offset, событие @init.
  • STree: слот #node-actions для действий над узлом по наведению.

Заметка по InertiaJS ​

Клиент @inertiajs/core 3.x читает начальную страницу только из <script data-page="app" type="application/json">. Включите use_script_element_for_initial_page в config/inertia.php, иначе — пустой экран без ошибок.