startup-ui 0.12.0 → 1.0.0

package/llms/components/interfaces/sstatus.md

@@ -0,0 +1,76 @@
+# SStatus
+
+Текстовый статус (как правило с иконкой).
+
+<SToggle title="В чем отличие от аналогов?">
+    <p>В отличие от популярных библиотек компонентов для Vue3:</p>
+    <ol>
+        <li>Привязка к FontAwesome, который бесплатен и оптимально решает задачи иконок для стартапов.</li>
+        <li>Привязка к <a href="/pages/welcome/basics/colors.html">стандартым цветам</a> проекта, упрощает семантику до минимальных настроек и унифицирует цвета.</li>
+    </ol>
+</SToggle>
+
+## Базовый пример
+
+```vue
+<template>
+    <SStatus color="green" icon="check">Работает</SStatus>
+    <SStatus color="red-dark" icon="triangle-exclamation">Остановлен</SStatus>
+    <SStatus color="text-light" icon="pause">Не запущен</SStatus>
+</template>
+
+<script setup>
+import { SStatus } from 'startup-ui'
+</script>
+```
+
+## Различные цвета
+
+Помимо иконок можно кастомизировать цвет статуса по стандартной палитре цветов:
+
+```vue
+<template>
+    <SStatus color="text" icon="check">text</SStatus>
+    <SStatus color="text-light" icon="check">text-light</SStatus>
+    <SStatus color="primary" icon="check">primary</SStatus>
+    <SStatus color="primary-dark" icon="check">primary-dark</SStatus>
+    <SStatus color="primary-darkest" icon="check">primary-darkest</SStatus>
+    <SStatus color="red" icon="check">red</SStatus>
+    <SStatus color="red-dark" icon="check">red-dark</SStatus>
+    <SStatus color="yellow" icon="check">yellow</SStatus>
+    <SStatus color="yellow-dark" icon="check">yellow-dark</SStatus>
+    <SStatus color="green" icon="check">green</SStatus>
+    <SStatus color="green-dark" icon="check">green-dark</SStatus>
+</template>
+
+<script setup>
+import { SStatus } from 'startup-ui'
+</script>
+```
+
+## Интерфейс компонента
+
+### Свойства (Props)
+
+| Название | Тип | По умолчанию | Описание |
+|----------|-----|--------------|----------|
+| color | string | undefined | Цвет текста и иконки из стандартной палитре: `text`, `text-light`, `primary`, `primary-dark`, `primary-darkest`, `red`, `red-dark`, `yellow`, `yellow-dark`, `green`, `green-dark` и др. |
+| icon | string \| string[] | undefined | Имя иконки FontAwesome (например, `'check'`, `'triangle-exclamation'`). |
+
+### Слоты (Slots)
+
+| Название | Описание |
+|----------|----------|
+| default | Текстовое содержимое, отображаемое рядом с иконкой. |
+
+<style lang="scss">
+.row {
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: 10px;
+
+    .s-status {
+        flex-basis: 150px;
+    }
+}
+</style>

package/llms/components/interfaces/stag.md

@@ -0,0 +1,70 @@
+# STag
+
+Тег (может также использоваться как отображение статуса).
+
+<SToggle title="В чем отличие от аналогов?">
+    <p>В отличие от популярных библиотек компонентов для Vue3:</p>
+    <ol>
+        <li>Привязка к <a href="/pages/welcome/basics/colors.html">стандартым цветам</a> проекта, упрощает семантику до минимальных настроек и унифицирует цвета.</li>
+    </ol>
+</SToggle>
+
+## Базовый пример
+
+```vue
+<template>
+    <STag>Новый</STag>
+</template>
+
+<script setup>
+import { STag } from 'startup-ui'
+</script>
+```
+
+## Различные цвета
+
+Атрибутом `color` можно передать значение цвета из палитры цветов:
+
+```vue
+<template>
+    <STag color="gray">gray</STag>
+    <STag color="primary">primary</STag>
+    <STag color="primary-dark">primary-dark</STag>
+    <STag color="primary-darkest">primary-darkest</STag>
+    <STag color="primary-light">primary-light</STag>
+    <STag color="primary-lightest">primary-lightest</STag>
+
+    <STag color="red">red</STag>
+    <STag color="red-dark">red-dark</STag>
+    <STag color="red-light">red-light</STag>
+    <STag color="red-lightest">red-lightest</STag>
+
+    <STag color="yellow">yellow</STag>
+    <STag color="yellow-dark">yellow-dark</STag>
+    <STag color="yellow-light">yellow-light</STag>
+    <STag color="yellow-lightest">yellow-lightest</STag>
+
+    <STag color="green">green</STag>
+    <STag color="green-dark">green-dark</STag>
+    <STag color="green-light">green-light</STag>
+    <STag color="green-lightest">green-lightest</STag>
+</template>
+
+<script setup>
+import { STag } from 'startup-ui'
+</script>
+```
+
+## Интерфейс компонента
+
+### Свойства (Props)
+
+| Название | Тип | По умолчанию | Описание |
+|----------|-----|--------------|----------|
+| color | string | `'gray'` | Цвет фона и текста. Поддерживает значения из палитры: `gray`, `primary`, `primary-dark`, `primary-darkest`, `primary-light`, `primary-lightest`, `red`, `red-dark`, `red-light`, `red-lightest`, `yellow`, `yellow-dark`, `yellow-light`, `yellow-lightest`, `green`, `green-dark`, `green-light`, `green-lightest`. |
+
+### Слоты (Slots)
+
+| Название | Описание |
+|----------|----------|
+| default | Текстовое содержимое или HTML внутри тега. |

package/llms/components/interfaces/stimeline.md

@@ -0,0 +1,47 @@
+# STimeline
+
+Вертикальная черта с точками-пунктами.
+
+<SToggle title="В чем отличие от аналогов?">
+    <p>В отличие от популярных библиотек компонентов для Vue3:</p>
+    <ol>
+        <li>Упрощено до минимально необходимого функционала, что обеспечивает одинаковое написание кода и взаимозаменяемость компонентов дальше.</li>
+    </ol>
+</SToggle>
+
+## Базовый пример
+
+```vue
+<template>
+    <STimeline :items="items">
+        <template #item="{ item }">
+            <strong>{{ item.last_visit_diff }} назад</strong> {{ item.username }} остановил переходы
+        </template>
+    </STimeline>
+</template>
+<script setup>
+const items = [
+    { id: 1, last_visit_diff: '2 д. 6 ч', username: 'Иванов' },
+    { id: 2, last_visit_diff: '4 д. 2 ч', username: 'Петров' },
+    { id: 3, last_visit_diff: '22 д. 1 ч', username: 'Сидоров' }
+]
+</script>
+```
+
+## Интерфейс компонента
+
+### Свойства (Props)
+
+| Название | Тип | По умолчанию | Описание |
+|----------|-----|--------------|----------|
+| items | `Array` | `undefined` | Обязательный массив объектов данных для итерации по таймлайну. |
+
+### Слоты (Slots)
+
+| Название | Привязки | Описание |
+|----------|----------|----------|
+| item | `{ item: Object, index: number }` | Слот для отображения содержимого рядом с маркером таймлайна для каждого элемента. |
+
+<script setup lang="ts">
+import SToggle from '../../../../packages/startup-ui/src/components/SToggle.vue';
+</script>

package/llms/components/interfaces/stoggle.md

@@ -0,0 +1,120 @@
+# SToggleGroup > SToggle
+
+Открывающийся-закрывающийся блок.
+
+## Базовый пример
+
+```vue
+<template>
+    <SToggle title="Какие есть гарантии результата?">
+        <p><strong>Результат до оплаты.</strong> После регистрации и стартовых действий ты получаешь стартовый депозит, на котором сможешь сделать быстрый тест и получить первые результаты.</p>
+    </SToggle>
+</template>
+
+<script setup>
+import { SToggle } from 'startup-ui'
+</script>
+```
+
+## Первоначально открытое состояние
+
+```vue
+<template>
+    <SToggle title="Какие есть гарантии результата?" opened>
+        <p><strong>Результат до оплаты.</strong> После регистрации и стартовых действий ты получаешь стартовый депозит, на котором сможешь сделать быстрый тест и получить первые результаты.</p>
+    </SToggle>
+</template>
+
+<script setup>
+import { SToggle } from 'startup-ui'
+</script>
+```
+
+## Кастомный заголовок
+
+Когда просто текста не достаточно, используем слот:
+
+```vue
+<SToggle>
+    <template #title>Обратите внимание&nbsp;<STag color="primary-darkest">1</STag></template>
+    При пополнении счета банковской картой вы получаете бонус в размере 10 000 рублей.
+</SToggle>
+```
+
+## Несколько блоков (аккордеон)
+
+```vue
+<template>
+    <SToggleGroup>
+        <SToggle title="Сколько это будет занимать времени">5 минут в день. Базовая настройка и запуск обычно занимает от 5 до 30 минут.</SToggle>
+        <SToggle title="Гарантии результата">Результат до оплаты. После регистрации и стартовых действий ты получаешь стартовый депозит, на котором сможешь сделать быстрый тест и получить первые результаты. И это лучше любых гарантий!</SToggle>
+    </SToggleGroup>
+</template>
+
+<script setup>
+import { SToggleGroup, SToggle } from 'startup-ui'
+</script>
+```
+
+По умолчанию будет давать открыть не более одного тоггла (остальные будет закрывать). Если нужно открыть несколько, то добавляем multiple:
+
+```vue
+<template>
+    <SToggleGroup multiple>
+        <SToggle title="Сколько это будет занимать времени">5 минут в день. Базовая настройка и запуск обычно занимает от 5 до 30 минут.</SToggle>
+        <SToggle title="Гарантии результата">Результат до оплаты. После регистрации и стартовых действий ты получаешь стартовый депозит, на котором сможешь сделать быстрый тест и получить первые результаты. И это лучше любых гарантий!</SToggle>
+    </SToggleGroup>
+</template>
+
+<script setup>
+import { SToggleGroup, SToggle } from 'startup-ui'
+</script>
+```
+
+## Цвета
+
+Атрибут `color` позволяет менять фоновый стиль заголовка `SToggle`.
+
+```vue
+<template>
+    <SToggle title="Стандартный (bg)" color="bg">Контент...</SToggle>
+    <SToggle title="Основной (primary)" color="primary">Контент...</SToggle>
+    <SToggle title="Зеленый (green)" color="green">Контент...</SToggle>
+    <SToggle title="Красный (red)" color="red">Контент...</SToggle>
+</template>
+
+<script setup>
+import { SToggle } from 'startup-ui'
+</script>
+```
+
+## Интерфейс компонента SToggleGroup
+
+### Свойства (Props)
+
+| Название | Тип | По умолчанию | Описание |
+|----------|-----|--------------|----------|
+| multiple | boolean | false | Если `true`, позволяет одновременно открывать несколько блоков внутри группы. |
+
+## Интерфейс компонента SToggle
+
+### Свойства (Props)
+
+| Название | Тип | По умолчанию | Описание |
+|----------|-----|--------------|----------|
+| title | string | undefined | Текст заголовка. |
+| opened | boolean | false | Если `true`, блок открыт по умолчанию. |
+| color | `'bg'` \| `'primary'` \| `'red'` \| `'green'` | `'bg'` | Цветовая схема заголовка. |
+
+### Слоты (Slots)
+
+| Название | Описание |
+|----------|----------|
+| title | Кастомное содержимое для заголовка (переопределяет проп `title`). |
+| default | Основное содержимое, которое раскрывается при клике. |
+
+<style lang="scss">
+.s-toggle {
+    color: var(--s-text);
+}
+</style>

package/llms/components/interfaces/stooltip.md

@@ -0,0 +1,88 @@
+# STooltip
+
+Иконка вопроса со всплывающей подсказкой.
+
+<SToggle title="В чем отличие от аналогов?">
+    <p>В отличие от популярных библиотек компонентов для Vue3:</p>
+    <ol>
+        <li>Текст подсказки в слоте, так что там можно размещать HTML-контент и ссылки на расширенную информацию.</li>
+        <li>Событийная логика сделана так, что мышку можно перевести с иконки на текст подсказки и кликнуть по ссылке, которая в ней.</li>
+    </ol>
+</SToggle>
+
+## Базовый пример
+
+```vue
+<template>
+    <p>
+        Показы <STooltip>Кол-во показов поискового сниппета. Данные из вебмастера за последний день, когда они есть для запроса</STooltip>
+    </p>
+</template>
+
+<script setup>
+import { STooltip } from 'startup-ui'
+</script>
+```
+
+## Фиксированное положение
+
+По умолчанию положение подсказки выбирается исходя из того, где эта подсказка уместится на экране. Но если нужно указать положение явно, можно использовать атрибут `at`:
+
+```vue
+<template>
+    <div>Сверху <STooltip at="top">Подсказка сверху</STooltip></div>
+    <div>Справа <STooltip at="right">Подсказка справа</STooltip></div>
+    <div>Снизу <STooltip at="bottom">Подсказка снизу</STooltip></div>
+    <div>Слева <STooltip at="left">Подсказка слева</STooltip></div>
+</template>
+
+<script setup>
+import { STooltip } from 'startup-ui'
+</script>
+```
+
+## Кастомная иконка
+
+Если нужна другая иконка, то её можно заменить атрибутом icon:
+
+```vue
+<template>
+    <div>Подсказка с другой иконкой <STooltip icon="circle-info">Используем иконку circle-info</STooltip></div>
+</template>
+
+<script setup>
+import { STooltip } from 'startup-ui'
+</script>
+```
+
+Если нужна совсем нестандартная иконка/область наведения, то можно использовать слот icon:
+
+```vue
+<STooltip>
+    <template #icon>❓</template>
+    Используем в качестве иконки эмодзи
+</STooltip>
+```
+
+## Интерфейс компонента
+
+### Свойства (Props)
+
+| Название | Тип | По умолчанию | Описание |
+|----------|-----|--------------|----------|
+| at | `'top'` \| `'bottom'` \| `'right'` \| `'left'` \| `null` | `null` | Принудительно задает положение подсказки. По умолчанию рассчитывается автоматически. |
+| icon | string \| string[] | `'circle-question'` | Имя иконки FontAwesome для триггера подсказки. |
+
+### Слоты (Slots)
+
+| Название | Описание |
+|----------|----------|
+| default | Содержимое внутри пузыря подсказки. Поддерживает HTML. |
+| icon | Переопределяет стандартную иконку FontAwesome. Позволяет разместить эмодзи, текст или кастомные элементы. |
+
+<style lang="scss" scoped>
+.s-tooltip {
+    font-family: 'Open Sans', sans-serif;
+    font-weight: 700;
+}
+</style>

package/llms/components/template/scanvas.md

@@ -0,0 +1,61 @@
+# SCanvas + SFooter
+
+Общий шаблон страницы.
+
+## Базовый пример
+
+```vue
+<SCanvas>
+    <template #header>
+        Шапка
+    </template>
+    <template #subheader>
+        Второй блок шапки
+    </template>
+    <template #sidebar>
+        Боковой блок страницы
+    </template>
+    <template #content>
+        Основной контент страницы
+    </template>
+</SCanvas>
+<SFooter>
+    <div>&copy; suhar.ru, 2025. Все права защищены</div>
+</SFooter>
+```
+
+## Утилиты SFooter
+
+У компонента `SFooter` нет собственных свойств, но его CSS включает класс `.s-footer-h`, специально созданный для центрирования контента с максимальной шириной (`1200px`):
+
+```vue
+<template>
+    <SFooter>
+        <div class="s-footer-h">
+            <!-- Контент будет центрирован с max-width и отступами (gap) -->
+            <div>Колонка 1</div>
+            <div>Колонка 2</div>
+        </div>
+    </SFooter>
+</template>
+```
+
+## Интерфейс компонента SCanvas
+
+### Слоты (Slots)
+
+| Название | Описание |
+|----------|----------|
+| header | Самая верхняя навигационная панель. Элементы с классом `.right` будут выровнены по правому краю на десктопе. |
+| subheader | Вторичная шапка под основной. Часто используется для хлебных крошек или подзаголовка. |
+| sidebar | Левая боковая панель навигации. На мобильных устройствах по умолчанию скрыта и доступна через бургер-меню. |
+| content | Основная область для контента страницы. Занимает оставшееся пространство рядом с сайдбаром. |
+| default | Рендерится между подшапкой и блоками `sidebar`/`content`. Часто используется для плашек (alerts) на всю ширину или для размещения `SFooter` в низу интерфейса. |
+
+## Интерфейс компонента SFooter
+
+### Слоты (Slots)
+
+| Название | Описание |
+|----------|----------|
+| default | Содержимое подвала (футера). |

package/llms/components/template/smenu.md

@@ -0,0 +1,88 @@
+# SMenu
+
+Горизонтальное меню с выпадающими подменю. Подходит для шапки (`header`) и подшапки (`subheader`) — объединяет в одном компоненте плоскую навигацию и дропдауны.
+
+Меню рассчитано на тёмную полосу (как `subheader`), поэтому в примерах ниже оно обёрнуто в контейнер с фоном `--s-bg-subheader`.
+
+## Базовый пример
+
+Пункт с массивом `children` раскрывает выпадающее подменю при наведении. Активный пункт отмечается «уголком».
+
+```vue
+<template>
+    <div style="background: var(--s-bg-subheader); color: var(--s-white); padding: 0 1rem; border-radius: var(--s-border-radius)">
+        <SMenu :items="items" />
+    </div>
+</template>
+
+<script setup>
+import { SMenu } from 'startup-ui'
+
+const items = [
+    { label: 'Главная', url: '/', active: true },
+    { label: 'Проекты', url: '/projects' },
+    { label: 'Помощь', url: '/help' },
+    {
+        label: 'Аккаунт',
+        children: [
+            { label: 'Профиль', url: '/profile' },
+            { label: 'Настройки', url: '/settings' },
+            { label: 'Выйти', url: '/logout', method: 'post' },
+        ],
+    },
+]
+</script>
+```
+
+## Иконки, счётчики и аватары
+
+У пунктов могут быть иконки (`icon`), числовые бейджи (`counter`) и круглые аватары (`avatar`). Иконки берутся из FontAwesome — см. [«Иконки»](/pages/welcome/basics/icons).
+
+```vue
+<template>
+    <div style="background: var(--s-bg-subheader); color: var(--s-white); padding: 0 1rem; border-radius: var(--s-border-radius)">
+        <SMenu :items="items" />
+    </div>
+</template>
+
+<script setup>
+import { SMenu } from 'startup-ui'
+
+const items = [
+    { label: 'Профиль', url: '/profile', icon: 'user' },
+    { label: 'Сообщения', url: '/messages', icon: 'envelope', counter: 5 },
+    { label: 'Внешний сайт', url: 'https://startup-ui.ru' },
+    { label: 'Иван Иванов', url: '/account', avatar: '/nature.jpg' },
+]
+</script>
+```
+
+Внешние ссылки (абсолютный URL на другой домен) открываются в новой вкладке; локальные ссылки используют SPA-навигацию, если при подключении плагина передан `link`-компонент (напр. Inertia `Link`) — см. [«Установка»](/pages/welcome/basics/installing).
+
+## Интерфейс компонента
+
+### Свойства (Props)
+
+| Название | Тип | По умолчанию | Описание |
+|----------|-----|--------------|----------|
+| items | `SMenuItem[]` | `[]` | Пункты меню. |
+
+### Объект пункта (SMenuItem)
+
+| Поле | Тип | Описание |
+|------|-----|----------|
+| label | string | Текст пункта. |
+| url | string | Ссылка. Внешние URL открываются в новой вкладке. |
+| icon | string \| string[] | Имя иконки FontAwesome (если не задан `avatar`). |
+| avatar | string | URL картинки-аватара (круглая, вместо иконки). |
+| counter | string \| number | Бейдж со счётчиком (напр. число непрочитанного). |
+| active | boolean | Подсветить как активный (жирный + «уголок» снизу). |
+| method | string | HTTP-метод для ссылки (напр. `'post'` для пункта «Выйти»). |
+| class | string | Дополнительный класс на пункт. |
+| children | `SMenuItem[]` | Вложенные пункты — раскрываются выпадающим подменю при наведении. |
+
+### Слоты (Slots)
+
+| Название | Описание |
+|----------|----------|
+| default | Произвольный контент в конце меню (после всех пунктов). |

package/llms/components/template/sverticalmenu.md

@@ -0,0 +1,113 @@
+# SVerticalMenu
+
+Боковое меню.
+
+<SToggle title="В чем отличие от аналогов?">
+    <p>В отличие от популярных библиотек компонентов для Vue3:</p>
+    <ol>
+        <li>Может сохранять набор раскрытых элементов в localStorage одним простым атрибутом.</li>
+    </ol>
+</SToggle>
+
+## Базовый пример
+
+```vue
+<template>
+    <SVerticalMenu :links="menuLinks" />
+</template>
+
+<script setup>
+const menuLinks = [
+    {
+        id: 34,
+        title: 'Мануал',
+        label: 'Мануал',
+        type: 'section',
+        children: [
+            { id: 6, label: 'Быстрый запуск', url: '/docs/quick-start/' },
+            { id: 30, label: 'Тарифы', url: '/docs/plans/' }
+        ]
+    },
+    {
+        id: 8,
+        title: 'Кейсы',
+        label: 'Кейсы',
+        type: 'section',
+        children: [
+            { id: 9, label: 'Кейс №1: Ландшафтный дизайн', url: '/docs/case1/' }
+        ]
+    }
+]
+</script>
+```
+
+Где menuLinks — это массив в формате `[{label, url, active, ?type, ?className, ?children}, ...]`
+
+## Раскрытые элементы
+
+Чтобы нужные элементы были раскрыты сразу, мы передаем массив их ID в атрибуте <strong>expanded-keys</strong>:
+
+```vue
+<template>
+    <SVerticalMenu :links="menuLinks" :expanded-keys="[34]" />
+</template>
+
+<script setup>
+const menuLinks = [ { id: 34, title: 'Мануал', label: 'Мануал', type: 'section', active: false, isPublished: true, children: [ { id: 6, title: 'Быстрый запуск проекта в ПфПульте', label: 'Быстрый запуск', type: 'article', active: false, url: '/docs/quick-start/', isPublished: true }, { id: 30, title: 'Тарифы ПфПульта', label: 'Тарифы', type: 'article', active: false, url: '/docs/plans/', isPublished: true }, { id: 31, title: 'Как подключить вебмастер', label: 'Как подключить вебмастер', type: 'article', active: false, url: '/docs/webmaster-integration/', isPublished: true }, { id: 32, title: 'Как получать лидов', label: 'Как получать лидов', type: 'article', active: false, url: '/docs/get-leads/', isPublished: true } ] }, { id: 8, title: 'Кейсы', label: 'Кейсы', type: 'section', active: false, isPublished: true, children: [ { id: 9, title: 'Кейс №1: Ландшафтный дизайн, Москва и область', label: 'Кейс №1: Ландшафтный дизайн', type: 'article', active: false, url: '/docs/case1/', isPublished: true } ] } ]
+</script>
+```
+
+## Запоминание раскрытых элементов
+
+Во всякого рода документациях
+
+Когда мы добавляем атрибут <strong>store-expanded-keys-to</strong>, раскрытые элементы сохраняются в localStorage. Теперь, если обновить страницу, раскрытые элементы сохранятся.
+
+```vue
+<template>
+    <SVerticalMenu :links="menuLinks" store-expanded-keys-to="opened-pages" />
+</template>
+
+<script setup>
+const menuLinks = [ { id: 34, title: 'Мануал', label: 'Мануал', type: 'section', active: false, isPublished: true, children: [ { id: 6, title: 'Быстрый запуск проекта в ПфПульте', label: 'Быстрый запуск', type: 'article', active: false, url: '/docs/quick-start/', isPublished: true }, { id: 30, title: 'Тарифы ПфПульта', label: 'Тарифы', type: 'article', active: false, url: '/docs/plans/', isPublished: true }, { id: 31, title: 'Как подключить вебмастер', label: 'Как подключить вебмастер', type: 'article', active: false, url: '/docs/webmaster-integration/', isPublished: true }, { id: 32, title: 'Как получать лидов', label: 'Как получать лидов', type: 'article', active: false, url: '/docs/get-leads/', isPublished: true } ] }, { id: 8, title: 'Кейсы', label: 'Кейсы', type: 'section', active: false, isPublished: true, children: [ { id: 9, title: 'Кейс №1: Ландшафтный дизайн, Москва и область', label: 'Кейс №1: Ландшафтный дизайн', type: 'article', active: false, url: '/docs/case1/', isPublished: true } ] } ]
+</script>
+```
+
+## Интерфейс компонента SVerticalMenu
+
+### Свойства (Props)
+
+| Название | Тип | По умолчанию | Описание |
+|----------|-----|--------------|----------|
+| links | `SVerticalMenuLink[]` | `[]` | Массив навигационных ссылок с поддержкой вложенности. |
+| expandedKeys | `(string \| number)[]` | `[]` | Массив ID элементов, которые должны быть раскрыты по умолчанию. |
+| storeExpandedKeysTo | string | `undefined` | Ключ в localStorage для сохранения состояния раскрытых элементов. |
+
+### Слоты (Slots)
+
+| Название | Описание |
+|----------|----------|
+| default | По умолчанию слоты отсутствуют, меню генерируется автоматически по пропсу `links`. |
+
+## Интерфейс объекта SVerticalMenuLink
+
+| Свойство | Тип | Описание |
+|----------|-----|----------|
+| id | string \| number | **Обязательное.** Уникальный идентификатор пункта меню (нужен для логики открытия/закрытия). |
+| label | string | **Обязательное.** Текст пункта меню. |
+| url | string | URL для перехода. Если указан — рендерится ссылкой (зарегистрированный `Link`, напр. Inertia; иначе обычный `<a>`). Если нет — используется как папка для дочерних элементов. |
+| active | boolean | Если `true`, пункт визуально помечается как активный. |
+| type | string | Может быть `'section'` для заголовка раздела (жирнее и с отступами). |
+| isPublished | boolean | Если `false`, пункт затеняется и появляется иконка перечеркнутого глаза (чтобы показать, что раздел скрыт на сайте). |
+| className | string | Дополнительные CSS классы пункта. |
+| children | `SVerticalMenuLink[]` | Вложенный массив дочерних пунктов. |
+
+<script setup lang="ts">
+import SToggle from '../../../../packages/startup-ui/src/components/SToggle.vue';
+</script>
+
+<style lang="scss">
+.vp-doc a.s-verticalmenu-label {
+    text-decoration: none;
+}
+</style>