startup-ui 0.11.3 → 1.0.0

package/llms/components/interfaces/sactionicon.md

@@ -0,0 +1,126 @@
+# SActionIcon
+
+Иконка действия (чаще всего используется в таблицах).
+
+<SToggle title="В чем отличие от аналогов?">
+    <p>В отличие от популярных библиотек компонентов для Vue3:</p>
+    <ol>
+        <li>Привязка к FontAwesome, который бесплатен и оптимально решает задачи иконок для стартапов.</li>
+        <li>Упрощает запрос подтверждения перед опасными действиями (напр. удаление) с помощью одного атрибута.</li>
+    </ol>
+</SToggle>
+
+## Стандартный пример
+
+Используются стандартые иконки FontAwesome. Типовой пример с click-событием:
+
+```vue
+<template>
+    <SActionIcon icon="pen-to-square" title="Редактировать" @click="greet('Hello!')" />
+    <SActionIcon :icon="['far', 'calendar']" title="Календарь" @click="greet('Hello!')" />
+    <SActionIcon icon="xmark" title="Закрыть" @click="greet('Hello!')" />
+    <SActionIcon icon="arrow-up-right-from-square" title="Открыть" @click="greet('Hello!')" />
+    <SActionIcon icon="circle-question" title="Помощь" @click="greet('Hello!')" />
+    <SActionIcon icon="copy" title="Копировать" @click="greet('Hello!')" />
+    <SActionIcon icon="bars" title="Меню" @click="greet('Hello!')" />
+    <SActionIcon icon="cloud-arrow-down" title="Скачать" @click="greet('Hello!')" />
+    <SActionIcon icon="folder-open" title="Открыть папку" @click="greet('Hello!')" />
+    <SActionIcon icon="user" title="Профиль" @click="greet('Hello!')" />
+</template>
+
+<script setup>
+function greet(msg) {
+    alert(msg)
+}
+</script>
+```
+
+## Ссылка в иконке
+
+Если указать href-атрибут, то по умолчанию иконка станет анкором:
+
+```vue
+<template>
+    <SActionIcon icon="pen-to-square" title="Перейти на сайт" href="https://startup-ui.ru" />
+    <SActionIcon :icon="['far', 'calendar']" title="Перейти на сайт" href="https://startup-ui.ru" />
+    <SActionIcon icon="xmark" title="Перейти на сайт" href="https://startup-ui.ru" />
+    <SActionIcon icon="arrow-up-right-from-square" title="Перейти на сайт" href="https://startup-ui.ru" />
+    <SActionIcon icon="circle-question" title="Перейти на сайт" href="https://startup-ui.ru" />
+    <SActionIcon icon="copy" title="Перейти на сайт" href="https://startup-ui.ru" />
+    <SActionIcon icon="bars" title="Перейти на сайт" href="https://startup-ui.ru" />
+    <SActionIcon icon="cloud-arrow-down" title="Перейти на сайт" href="https://startup-ui.ru" />
+    <SActionIcon icon="folder-open" title="Перейти на сайт" href="https://startup-ui.ru" />
+    <SActionIcon icon="user" title="Перейти на сайт" href="https://startup-ui.ru" />
+</template>
+
+<script setup>
+import { SActionIcon } from 'startup-ui'
+</script>
+```
+
+Но при необходимости также через атрибут is можно также передать Link-компонент InertiaJs:
+
+```vue
+<template>
+    <SActionIcon icon="pen-to-square" title="Редактировать" :is="Link" href="/users/" />
+</template>
+
+<script setup>
+import { Link } from '@inertiajs/vue3';
+</script>
+```
+
+## Подтверждение действия
+
+Для небезопасных действий выделяем иконку цветом (атрибут <strong>danger</strong>) и запрашиваем подтверждение перед выполнением (атрибут <strong>confirm</strong>):
+
+```vue
+<template>
+    <SActionIcon title="Удалить" @click="deleteUser" icon="trash" danger
+        confirm="Вы действительно хотите удалить пользователя?" />
+</template>
+
+<script setup>
+function deleteUser() {
+    alert('Пользователь удален (эмуляция)')
+}
+</script>
+```
+
+Подписи и цвет кнопок диалога настраиваются через `confirm-options` (пробрасываются в `SConfirm`):
+
+```vue
+<SActionIcon
+    icon="trash"
+    confirm="Удалить запись?"
+    :confirm-options="{ acceptLabel: 'Удалить', variant: 'danger' }"
+    @click="remove"
+/>
+```
+
+## Интерфейс компонента
+
+### Свойства (Props)
+
+| Название | Тип | По умолчанию | Описание |
+|----------|-----|--------------|----------|
+| icon | string \| string[] | required | Имя иконки FontAwesome (например, `'trash'` или `['far', 'calendar']`) |
+| danger | boolean | false | Выделяет иконку красным цветом |
+| confirm | string | undefined | Текст диалога подтверждения перед выполнением `@click` |
+| confirmTitle | string | 'Необходимо подтверждение' | Заголовок диалога подтверждения |
+| confirmOptions | object | undefined | Опции, пробрасываемые в `SConfirm.open` (`acceptLabel`, `cancelLabel`, `variant`, …) |
+| is | string \| Component | undefined | HTML-элемент или Vue-компонент для рендеринга (например, InertiaJS `Link`) |
+| href | string | undefined | URL для перехода (делает иконку ссылкой) |
+| title | string | undefined | Текст подсказки при наведении |
+
+### События (Events)
+
+| Название | Параметры | Описание |
+|----------|-----------|----------|
+| click | none | Вызывается при клике на иконку. Срабатывает ПОСЛЕ подтверждения, если передан параметр `confirm`. |
+
+<style lang="scss" scoped>
+a {
+    color: var(--s-primary);
+}
+</style>

package/llms/components/interfaces/salert.md

@@ -0,0 +1,87 @@
+# SAlert
+
+Оповещение о произошедшем событии.
+
+<SToggleGroup>
+    <SToggle title="В чем отличие от аналогов?">
+        <p>В отличие от популярных библиотек компонентов для Vue3:</p>
+        <ol>
+            <li>Упрощено до одного метода, не требует добавлять элемент в шаблон.</li>
+        </ol>
+    </SToggle>
+    <SToggle title="Что будет ценно улучшить">
+    <ol>
+        <li>Добавить возможность собирать серию оповещений друг под другом.</li>
+    </ol>
+    </SToggle>
+</SToggleGroup>
+
+## Базовый пример
+
+Информационное оповещение:
+
+```vue
+<template>
+    <SButton @click="SAlert.info('Информация')">Информация</SButton>
+</template>
+<script setup>
+import { SAlert } from 'startup-ui'
+</script>
+```
+
+Оповещение об успешном действии:
+
+```vue
+<template>
+    <SButton color="green" @click="SAlert.success('Успех')">Успех</SButton>
+</template>
+<script setup>
+import { SAlert } from 'startup-ui'
+</script>
+```
+
+Оповещение об ошибке:
+
+```vue
+<template>
+    <SButton color="red" @click="SAlert.error('Ошибка')">Ошибка</SButton>
+</template>
+<script setup>
+import { SAlert } from 'startup-ui'
+</script>
+```
+
+## Увеличенное время до закрытия
+
+По умолчанию оповещения закрываются через 5 секунд. Другое время закрытия можно задать параметром closeAfter:
+
+```vue
+<template>
+    <SButton @click="closeWithDelay">Информация</SButton>
+</template>
+<script setup>
+import { SAlert } from 'startup-ui'
+
+function closeWithDelay() {
+    SAlert.info('Закроется через 5 секунд', {
+        closeAfter: 5000,
+    })
+}
+</script>
+```
+
+## Интерфейс компонента
+
+### Методы
+
+- `SAlert.info(text: string, options?: AlertOptions)` — информационное оповещение
+- `SAlert.success(text: string, options?: AlertOptions)` — оповещение об успехе
+- `SAlert.error(text: string, options?: AlertOptions)` — оповещение об ошибке
+- `SAlert.open(text: string, options?: AlertOptions)` — базовый метод (тип задаётся в `options`)
+
+### AlertOptions
+
+| Название | Тип | По умолчанию | Описание |
+|----------|-----|--------------|----------|
+| type | `'success'` \| `'info'` \| `'error'` | `'info'` | Визуальный стиль оповещения. |
+| closeAfter | number | `3000` | Время в миллисекундах до автозакрытия. |

package/llms/components/interfaces/sbutton.md

@@ -0,0 +1,167 @@
+# SButton
+
+Кнопка.
+
+<SToggle title="В чем отличие от аналогов?">
+    <p>В отличие от популярных библиотек компонентов для Vue3:</p>
+    <ol>
+        <li>В зависимости от контекста сам подбирает семантический элемент: анкор для ссылок или button для отправки формы.</li>
+        <li>Позволяет передать Link-элемент InertiaJS в качестве атрибута as.</li>
+    </ol>
+</SToggle>
+
+## Стандартный пример
+
+Используйте `color`, `outlined`, `transparent`, `disabled`, `small`, `loading` и `fullwidth` чтобы задать стили кнопок.
+
+### Основной цвет
+
+```vue
+<template>
+    <SButton>Основное действие</SButton>
+    <SButton outlined>Дополнительное действие</SButton>
+    <SButton transparent>Прозрачная кнопка</SButton>
+    <SButton disabled>Недоступная кнопка</SButton>
+    <SButton small>Маленькая кнопка</SButton>
+</template>
+
+<script setup>
+import { SButton } from 'startup-ui'
+</script>
+```
+
+### Красная кнопка
+
+```vue
+<template>
+    <SButton color="red">Основное действие</SButton>
+    <SButton outlined color="red">Дополнительное действие</SButton>
+    <SButton transparent color="red">Прозрачная кнопка</SButton>
+    <SButton disabled color="red">Недоступная кнопка</SButton>
+    <SButton small color="red">Маленькая кнопка</SButton>
+</template>
+
+<script setup>
+import { SButton } from 'startup-ui'
+</script>
+```
+
+### Зеленая кнопка
+
+```vue
+<template>
+    <SButton color="green">Основное действие</SButton>
+    <SButton outlined color="green">Дополнительное действие</SButton>
+    <SButton transparent color="green">Прозрачная кнопка</SButton>
+    <SButton disabled color="green">Недоступная кнопка</SButton>
+    <SButton small color="green">Маленькая кнопка</SButton>
+</template>
+
+<script setup>
+import { SButton } from 'startup-ui'
+</script>
+```
+
+### Жёлтая кнопка
+
+```vue
+<template>
+    <SButton color="yellow">Основное действие</SButton>
+    <SButton outlined color="yellow">Дополнительное действие</SButton>
+    <SButton transparent color="yellow">Прозрачная кнопка</SButton>
+    <SButton disabled color="yellow">Недоступная кнопка</SButton>
+    <SButton small color="yellow">Маленькая кнопка</SButton>
+</template>
+
+<script setup>
+import { SButton } from 'startup-ui'
+</script>
+```
+
+### Кнопка на всю ширину формы
+
+```vue
+<template>
+    <SButton fullwidth>Основное действие</SButton>
+    <SButton fullwidth color="red">Основное действие</SButton>
+    <SButton fullwidth color="green">Основное действие</SButton>
+    <SButton fullwidth color="yellow">Основное действие</SButton>
+</template>
+
+<script setup>
+import { SButton } from 'startup-ui'
+</script>
+```
+
+## Действия по кнопке
+
+### Отправка формы
+
+Если кнопка внутри формы, то отправляет форму:
+
+```vue
+<template>
+    <SForm method="post" action="/users/create">
+        ...
+        <SButton>Создать пользователя</SButton>
+    </SForm>
+</template>
+```
+
+### Кастомное действие
+
+```vue
+<template>
+    <SButton @click="createUser">Создать пользователя</SButton>
+</template>
+<script setup>
+import { SAlert } from 'startup-ui'
+function createUser() {
+    SAlert.success('Пользователь создан')
+}
+</script>
+```
+
+### Переход по ссылке
+
+Если добавляем href, то кнопка по умолчанию становится семантически правильным анкором:
+
+```vue
+<template>
+    <SButton href="https://startup-ui.ru">Документация</SButton>
+</template>
+
+<script setup>
+import { SButton } from 'startup-ui'
+</script>
+```
+
+### Переход по внутренней ссылке InertiaJs
+
+Если нужно сделать кнопку внутренней InertjaJS-ссылкой, то используем атрибут "is":
+
+```vue
+<SButton :is="Link" href="/projects/create">Создать проект</SButton>
+```
+
+## Интерфейс компонента
+
+### Свойства (Props)
+
+| Название | Тип | По умолчанию | Описание |
+|----------|-----|--------------|----------|
+| outlined | boolean | false | Стиль кнопки с контуром (без заливки) |
+| transparent | boolean | false | Прозрачная кнопка без границ |
+| fullwidth | boolean | false | Кнопка на всю ширину контейнера |
+| small | boolean | false | Маленький размер кнопки |
+| disabled | boolean | false | Отключает кнопку (некликабельна, прозрачность 0.3) |
+| loading | boolean | false | Состояние загрузки (некликабельна, курсор ожидания) |
+| color | string | — | Цвет кнопки: `"red"`, `"green"`, `"yellow"` или кастомный |
+| is | string \| Component | — | HTML-элемент или Vue-компонент для рендеринга (например, InertiaJS `Link`) |
+| href | string | — | URL для перехода (делает кнопку ссылкой) |
+
+### Слоты (Slots)
+
+| Название | Описание |
+|----------|----------|
+| default | Содержимое кнопки (текст, иконка и т.д.) |

package/llms/components/interfaces/scolumnsettings.md

@@ -0,0 +1,204 @@
+# SColumnSettings
+
+Включение/выключение колонок в таблице.
+
+## Базовый пример
+
+```vue
+<template>
+    <div style="display: flex; justify-content: flex-end; margin-bottom: 20px;">
+        <SColumnSettings v-model="tableColumns" :options="availableColumns" />
+    </div>
+
+    <STable :data="users">
+        <template #header>
+            <td>Пользователь</td>
+            <template v-for="tableColumn in tableColumns" :key="tableColumn">
+                <td class="center">{{ availableColumns[tableColumn] }}</td>
+            </template>
+            <td></td>
+        </template>
+        <template #row="{ row }">
+            <td>{{ row.username }}</td>
+            <template v-for="tableColumn in tableColumns" :key="tableColumn">
+                <td class="center">{{ row[tableColumn] }}</td>
+            </template>
+            <td class="right">
+                <SActionIcon title="Удалить" :confirm="`Вы действительно хотите удалить пользователя «${row.username}»?`"
+                    @click="deleteUser(row.username)" icon="trash" danger />
+            </td>
+        </template>
+    </STable>
+</template>
+<script setup>
+import { ref, computed } from 'vue'
+
+const users = ref([
+    { username: 'Ivanov', role: 'customer', plan: 'Базовый', balance: 3000 },
+    { username: 'Petrov', role: 'admin', plan: 'Расширенный', balance: 4500 }
+])
+
+function deleteUser(username) {
+    users.value = users.value.filter(user => user.username !== username)
+}
+
+const availableColumns = {
+    plan: 'Тариф',
+    balance: 'Баланс',
+    role: 'Роль'
+}
+const tableColumns = ref(Object.keys(availableColumns))
+</script>
+```
+
+## Сброс колонок до значений по умолчанию
+
+Если нужно сбрасывать колонки до набора по умолчанию, это можно сделать так:
+
+```vue
+<template>
+    <div style="display: flex; justify-content: flex-end; margin-bottom: 20px;">
+        <SColumnSettings v-model="tableColumns" :options="availableColumns" :column-presets="columnPresets" />
+    </div>
+
+    <STable :data="users">
+        <template #header>
+            <td>Пользователь</td>
+            <template v-for="tableColumn in tableColumns" :key="tableColumn">
+                <td class="center">{{ availableColumns[tableColumn] }}</td>
+            </template>
+            <td></td>
+        </template>
+        <template #row="{ row }">
+            <td>{{ row.username }}</td>
+            <template v-for="tableColumn in tableColumns" :key="tableColumn">
+                <td class="center">{{ row[tableColumn] }}</td>
+            </template>
+            <td class="right">
+                <SActionIcon title="Удалить" :confirm="`Вы действительно хотите удалить пользователя «${row.username}»?`"
+                    @click="deleteUser(row.username)" icon="trash" danger />
+            </td>
+        </template>
+    </STable>
+</template>
+<script setup>
+import { ref } from 'vue'
+
+const users = ref([
+    { username: 'Ivanov', role: 'customer', plan: 'Базовый', balance: 3000, created_at: '2025-11-04' },
+    { username: 'Petrov', role: 'admin', plan: 'Расширенный', balance: 4500, created_at: '2025-11-05' }
+])
+
+function deleteUser(username) {
+    users.value = users.value.filter(user => user.username !== username)
+}
+
+const availableColumns = {
+    plan: 'Тариф',
+    balance: 'Баланс',
+    role: 'Роль',
+    created_at: 'Дата регистрации'
+}
+const tableColumns = ref(Object.keys(availableColumns))
+
+const columnPresets = [{
+    title: 'Стандартные колонки',
+    columns: ['plan', 'balance', 'role', 'created_at']
+}]
+</script>
+```
+
+Когда набор полей всего один, по умолчанию в футере выпадающего списка выводится строка «Сбросить изменения», когда несколько — выводится название каждого набора. Это повдение можно изменить с помощью слота <strong>setpreset</strong>:
+
+```vue
+<template>
+    <SColumnSettings v-model="tableColumns" :options="availableColumns" :column-presets="columnPresets">
+        <template #setpreset="{ preset }">
+            <FontAwesomeIcon icon="rotate-left" /> Сбросить на {{ preset.title }}
+        </template>
+    </SColumnSettings>
+</template>
+```
+
+## Постоянные колонки
+
+Если нужно запретить удаление определенных колонок, передайте массив с ними в атрибут <strong>permanent-columns</strong>:
+
+```vue
+<template>
+    <div style="display: flex; justify-content: flex-end; margin-bottom: 20px;">
+        <SColumnSettings v-model="tableColumns" :permanent-columns="permanentColumns" :column-presets="columnPresets" :options="availableColumns" />
+    </div>
+
+    <STable :data="users">
+        <template #header>
+            <td>Пользователь</td>
+            <template v-for="tableColumn in tableColumns" :key="tableColumn">
+                <td class="center">{{ availableColumns[tableColumn] }}</td>
+            </template>
+            <td></td>
+        </template>
+        <template #row="{ row }">
+            <td>{{ row.username }}</td>
+            <template v-for="tableColumn in tableColumns" :key="tableColumn">
+                <td class="center">{{ row[tableColumn] }}</td>
+            </template>
+            <td class="right">
+                <SActionIcon title="Удалить" :confirm="`Вы действительно хотите удалить пользователя «${row.username}»?`"
+                    @click="deleteUser(row.username)" icon="trash" danger />
+            </td>
+        </template>
+    </STable>
+</template>
+<script setup>
+import { ref } from 'vue'
+
+const users = ref([
+    { username: 'Ivanov', role: 'customer', plan: 'Базовый', balance: 3000, created_at: '2025-11-04' },
+    { username: 'Petrov', role: 'admin', plan: 'Расширенный', balance: 4500, created_at: '2025-11-05' }
+])
+
+function deleteUser(username) {
+    users.value = users.value.filter(user => user.username !== username)
+}
+
+const availableColumns = {
+    plan: 'Тариф',
+    balance: 'Баланс',
+    role: 'Роль',
+    created_at: 'Дата регистрации'
+}
+const tableColumns = ref(Object.keys(availableColumns))
+
+const columnPresets = [{
+    title: 'Стандартные колонки',
+    columns: ['plan', 'balance', 'role', 'created_at']
+}]
+
+const permanentColumns = ['role']
+</script>
+```
+
+## Интерфейс компонента
+
+### Свойства (Props)
+
+| Название | Тип | По умолчанию | Описание |
+|----------|-----|--------------|----------|
+| modelValue / v-model | `string[]` | `[]` | Массив ключей активных колонок. |
+| options | `Record<string, string>` | `{}` | Объект (словарь), сопоставляющий ключи колонок с их отображаемыми заголовками, например `{ id: 'Идентификатор' }`. |
+| columnPresets | `SColumnSettingsPreset[]` | `[]` | Массив объектов `{ title: string, columns: string[] }`. Используется для быстрого сброса колонок на заданные пресеты. |
+| permanentColumns | `string[]` | `[]` | Массив ключей колонок, которые пользователь не может выключить. |
+
+### Слоты (Slots)
+
+| Название | Описание |
+|----------|----------|
+| label | Основное содержимое кнопки, открывающей выпадающий список. По умолчанию отображает иконку и текст "Настроить колонки". |
+| setpreset | Слот для переопределения шаблона кнопки пресета в подвале выпадающего списка. Передает параментр `{ preset }`. |
+
+<style lang="scss">
+.s-custom-dropdown-container.open li + li {
+    margin-top: 0;
+}
+</style>

package/llms/components/interfaces/sconfirm.md

@@ -0,0 +1,57 @@
+# SConfirm
+
+Диалоговое окно подтверждения действия.
+
+<SToggle title="В чем отличие от аналогов?">
+    <p>В отличие от популярных библиотек компонентов для Vue3:</p>
+    <ol>
+        <li>Упрощено до одного метода, не требует добавлять элемент в шаблон.</li>
+    </ol>
+</SToggle>
+
+## Базовый пример
+
+```vue
+<template>
+    <SButton @click="deleteUser">Удалить пользователя</SButton>
+</template>
+
+<script setup>
+import { SConfirm, SAlert } from 'startup-ui'
+
+function deleteUser() {
+    SConfirm.open('Вы действительно хотите удалить пользователя?', {
+        title: 'Подтверждение удаления',
+        onAccept: () => SAlert.success('Пользователь удален')
+    })
+}
+</script>
+```
+
+## Интерфейс компонента
+
+`SConfirm.open(message: string, options?: ConfirmOptions)`
+
+### Аргументы
+
+| Название | Тип | Описание |
+|----------|-----|----------|
+| message | string | Обязательный. Основной текст/HTML диалога подтверждения. |
+| options | object | Необязательный объект конфигурации (см. ConfirmOptions ниже). |
+
+### ConfirmOptions
+
+| Название | Тип | По умолчанию | Описание |
+|----------|-----|--------------|----------|
+| title | string | `'Необходимо подтверждение'` | Заголовок диалогового окна. |
+| acceptLabel | string | `'Да'` | Текст кнопки подтверждения. |
+| cancelLabel | string | `'Нет'` | Текст кнопки отмены. |
+| variant | `'primary' \| 'danger'` | `'danger'` | Цвет кнопки подтверждения: `danger` (красная) для разрушающих действий, `primary` — для неразрушающих (move и т.п.). |
+| onAccept | function | `() => {}` | Коллбэк при нажатии кнопки подтверждения. |
+| onCancel | function | `() => {}` | Коллбэк при нажатии кнопки отмены или фонового оверлея. |
+
+<style lang="scss">
+.s-confirm {
+    color: var(--s-text);
+}
+</style>