startup-ui 0.12.0 → 1.0.1

package/llms/components/interfaces/scopytext.md

@@ -0,0 +1,67 @@
+# SCopyText
+
+Копируемый текст.
+
+<SToggle title="В чем отличие от аналогов?">В популярных библиотеках элементов для Vue3 прямого аналога нет.</SToggle>
+
+## Базовый пример
+
+```vue
+<template>
+    <SCopyText>ABCD-EFGH-1234-5678</SCopyText>
+</template>
+
+<script setup>
+import { SCopyText } from 'startup-ui'
+</script>
+```
+
+## Внутристрочный пример
+
+```vue
+<template>
+    <SCopyText layout="inline">Секретный код для копирования</SCopyText> в обычном тексте.
+</template>
+
+<script setup>
+import { SCopyText } from 'startup-ui'
+</script>
+```
+
+## Копируем не то, что выводим
+
+```vue
+<template>
+    <SCopyText copytext="777">Секретный код: 777</SCopyText>
+</template>
+
+<script setup>
+import { SCopyText } from 'startup-ui'
+</script>
+```
+
+## Интерфейс компонента
+
+### Свойства (Props)
+
+| Название | Тип | По умолчанию | Описание |
+|----------|-----|--------------|----------|
+| layout | `'input'` \| `'inline'` | `'input'` | Вид компонента. `'input'` — блок с рамкой, `'inline'` — текст с пунктирным подчёркиванием. |
+| copytext | string | undefined | Строка, которая будет скопирована в буфер. Если не указана, копируется текст из слота. |
+| size | `'small'` \| `'normal'` \| `'large'` | `'normal'` | Размер компонента. |
+
+### Слоты (Slots)
+
+| Название | Описание |
+|----------|----------|
+| default | Текстовое содержимое, отображаемое пользователю. |
+
+<script setup lang="ts">
+import SToggle from '../../../../packages/startup-ui/src/components/SToggle.vue';
+</script>
+
+<style lang="scss">
+.block .s-copytext {
+    max-width: 450px;
+}
+</style>

package/llms/components/interfaces/sdashboard.md

@@ -0,0 +1,130 @@
+# SDashboard > SDashboardItem
+
+Дешборд блоков (как правило, удобно использовать для отчетов).
+
+<SToggle title="В чем отличие от аналогов?">
+    В попурярных библиотеках компонентов для Vue3 прямого аналога нет.
+</SToggle>
+
+## Базовый пример
+
+```vue
+<template>
+    <SDashboard>
+        <SDashboardItem title="Продажи">
+            Информация о продажах.
+        </SDashboardItem>
+        <SDashboardItem title="Списания за услуги">
+            Информация о стоимости услуг.
+        </SDashboardItem>
+    </SDashboard>
+</template>
+
+<script setup>
+import { SDashboard, SDashboardItem } from 'startup-ui'
+</script>
+```
+
+## Кастомный заголовок
+
+Если текста не достаточно, то для заголовка можно использовать слот:
+
+```vue
+<SDashboard>
+    <SDashboardItem>
+        <template #title>
+            Продажи <STooltip>Только с подписанными актами</STooltip>
+        </template>
+        Информация о продажах.
+    </SDashboardItem>
+</SDashboard>
+```
+
+## Доп.элемент справа от заголовка
+
+Справа от заголовка часто бывает сподручно разместить дополнительную ссылку или что-то ещё. Сделать это можно в слоте #extra:
+
+```vue
+<SDashboard>
+    <SDashboardItem title="Мой тариф">
+        <template #extra>
+            <a href="/docs/plans/">Как работают тарифы?</a>
+        </template>
+        Описание работы тарифов
+    </SDashboardItem>
+</SDashboard>
+```
+
+## Максимальная высота контента
+
+Иногда динамически генерируемый контент внутри SDashboardItem может превращаться в длинную простыню. Чтобы не занимать большое пространство подобным блоком, такой контент можно ограничить по высоте, и в случае превышения в блоке появится свой внутренний горизонтальный скролл.
+
+```vue
+<template>
+    <SDashboard>
+        <SDashboardItem title="Регистрации пользователей" :max-content-height="300">
+            ...
+        </SDashboardItem>
+    </SDashboard>
+</template>
+
+<script setup>
+import { SDashboard, SDashboardItem } from 'startup-ui'
+</script>
+```
+
+## Цвета
+
+По умолчанию блоки идут в самом светлом цвете акцента, но при необходимости можно использовать кастомные выделения цветом:
+
+```vue
+<template>
+    <SDashboard>
+        <SDashboardItem title="Обычный блок" />
+        <SDashboardItem gray title="Серый блок" />
+        <SDashboardItem green title="Зеленый блок" />
+        <SDashboardItem red title="Красный блок" />
+    </SDashboard>
+</template>
+
+<script setup>
+import { SDashboard, SDashboardItem } from 'startup-ui'
+</script>
+```
+
+## Интерфейс компонента SDashboard
+
+### Свойства (Props)
+
+_Нет свойств. Это просто контейнер для обертки и автоматического позиционирования (flex/grid)._
+
+## Интерфейс компонента SDashboardItem
+
+### Свойства (Props)
+
+| Название | Тип | По умолчанию | Описание |
+|----------|-----|--------------|----------|
+| title | string | undefined | Текстовый заголовок блока дашборда. |
+| maxContentHeight | string \| number | undefined | Фиксированная максимальная высота контента (например, `300` или `'300px'`). При переполнении появится скролл. |
+| gray | boolean | `false` | Применяет серый цвет фона. |
+| green | boolean | `false` | Применяет светло-зеленый цвет фона. |
+| red | boolean | `false` | Применяет светло-красный цвет фона. |
+
+### Слоты (Slots)
+
+| Название | Описание |
+|----------|----------|
+| default | Основное содержимое блока. |
+| title | Заменяет строковый заголовок (`title`) на кастомный HTML/компоненты. |
+| extra | Контейнер с правой стороны заголовка, полезен для ссылок или кнопок действий. |
+
+<script setup lang="ts">
+import SToggle from '../../../../packages/startup-ui/src/components/SToggle.vue';
+</script>
+
+<style lang="scss">
+.s-dashboard {
+    color: var(--s-text);
+    margin-bottom: 0;
+}
+</style>

package/llms/components/interfaces/sdialog.md

@@ -0,0 +1,158 @@
+# SDialog
+
+Диалоговое окно.
+
+## Базовый пример
+
+```vue
+<template>
+    <SDialog v-model="isShown" title="Войти в личный кабинет">
+        <SForm v-model="form" @submit.prevent="submit">
+            <SFormRow title="Логин" name="login">
+                <SInput />
+            </SFormRow>
+            <SFormRow title="Пароль" name="password">
+                <SInput type="password" />
+            </SFormRow>
+            <SButton>Войти</SButton>
+        </SForm>
+    </SDialog>
+
+    <SButton @click="isShown = true">Открыть окно</SButton>
+</template>
+<script setup>
+import { ref } from 'vue'
+
+const isShown = ref(false)
+const form = ref({ login: '', password: '' })
+
+function submit() {
+    isShown.value = false
+}
+</script>
+```
+
+## Фиксированная ширина
+
+```vue
+<template>
+    <SDialog v-model="isShown" title="Войти в личный кабинет" width="500px">
+        <SForm v-model="form" @submit.prevent="submit">
+            <SFormRow title="Логин" name="login">
+                <SInput />
+            </SFormRow>
+            <SFormRow title="Пароль" name="password">
+                <SInput type="password" />
+            </SFormRow>
+            <SButton>Войти</SButton>
+        </SForm>
+    </SDialog>
+
+    <SButton @click="isShown = true">Открыть окно</SButton>
+</template>
+<script setup>
+import { ref } from 'vue'
+
+const isShown = ref(false)
+const form = ref({ login: '', password: '' })
+
+function submit() {
+    isShown.value = false
+}
+</script>
+```
+
+## Не-модальное окно
+
+По умолчанию окно модальное (нельзя взаимодействовать с другими объектами при открытом окне). Но если нужно отключить модальность, это можно сделать вот так:
+
+```vue
+<template>
+    <SDialog v-model="isShown" title="Войти в личный кабинет" not-modal>
+        <SForm v-model="form" @submit.prevent="submit">
+            <SFormRow title="Логин" name="login">
+                <SInput />
+            </SFormRow>
+            <SFormRow title="Пароль" name="password">
+                <SInput type="password" />
+            </SFormRow>
+            <SButton>Войти</SButton>
+        </SForm>
+    </SDialog>
+
+    <SButton @click="isShown = true">Открыть окно</SButton>
+</template>
+<script setup>
+import { ref } from 'vue'
+
+const isShown = ref(false)
+const form = ref({ login: '', password: '' })
+
+function submit() {
+    isShown.value = false
+}
+</script>
+```
+
+## Не закрывать по клику на оверлей
+
+По умолчанию при клике на оверлей окно закрывается, если надо перехватывать-останавливать событие, то:
+
+```vue
+<template>
+    <SDialog v-model="isShown" title="Войти в личный кабинет" @overlay-click.stop.prevent>
+        <SForm v-model="form" @submit.prevent="submit">
+            <SFormRow title="Логин" name="login">
+                <SInput />
+            </SFormRow>
+            <SFormRow title="Пароль" name="password">
+                <SInput type="password" />
+            </SFormRow>
+            <SButton>Войти</SButton>
+        </SForm>
+    </SDialog>
+
+    <SButton @click="isShown = true">Открыть окно</SButton>
+</template>
+<script setup>
+import { ref } from 'vue'
+
+const isShown = ref(false)
+const form = ref({ login: '', password: '' })
+
+function submit() {
+    isShown.value = false
+}
+</script>
+```
+
+## Интерфейс компонента
+
+### Свойства (Props)
+
+| Название | Тип | По умолчанию | Описание |
+|----------|-----|--------------|----------|
+| modelValue (v-model) | boolean | false | Управляет видимостью диалога. |
+| title | string | undefined | Текст заголовка в шапке окна. |
+| width | string | undefined | Кастомная ширина окна (например, `'500px'`, `'80vw'`). |
+| notModal | boolean | false | Если `true`, убирает фоновый оверлей (не-модальное окно). |
+
+### События (Events)
+
+| Название | Параметры | Описание |
+|----------|-----------|----------|
+| update:modelValue | boolean | Срабатывает при изменении v-model. |
+| overlay-click | — | Срабатывает при клике на фоновый оверлей. Окно закрывается, если не предотвращено (`.stop.prevent`). |
+| hide | — | Срабатывает при закрытии окна (крестиком или кликом на оверлей). |
+
+### Слоты (Slots)
+
+| Название | Описание |
+|----------|----------|
+| default | Основное содержимое диалогового окна. |
+
+<style lang="scss">
+.s-dialog {
+    color: var(--s-text);
+}
+</style>

package/llms/components/interfaces/simagepreview.md

@@ -0,0 +1,98 @@
+# SImagePreview
+
+Картинка, которую можно посмотреть более детально в диалоговом окне.
+
+## Базовый пример
+
+Выводим картинку, которая увеличивается при клике.
+
+```vue
+<template>
+    <div class="preview-container">
+        <SImagePreview src="/animals.webp" />
+    </div>
+</template>
+
+<script setup>
+import { SImagePreview } from 'startup-ui'
+</script>
+```
+
+## Кастомное превью
+
+Если первоначально до клика показывается другое изображение (напр.меньшего размера), то используем атрибут preview:
+
+```vue
+<template>
+    <div class="preview-container">
+        <SImagePreview preview="/nature.jpg" src="/animals.webp" />
+    </div>
+</template>
+
+<script setup>
+import { SImagePreview } from 'startup-ui'
+</script>
+```
+
+Если нужно вставить кастомный контент, используем слот "preview":
+
+```vue
+<div class="preview-container">
+    <SImagePreview src="/animals.webp">
+        <template #preview>
+            <img src="/nature.jpg" />
+        </template>
+    </SImagePreview>
+</div>
+```
+
+## Кастомная иконка увеличения
+
+В icon-атрибуте указываем название иконки:
+
+```vue
+<template>
+    <div class="preview-container">
+        <SImagePreview src="/animals.webp" icon="magnifying-glass-plus" />
+    </div>
+</template>
+
+<script setup>
+import { SImagePreview } from 'startup-ui'
+</script>
+```
+
+Если нужно вставить кастомный контент, используем слот "icon":
+
+```vue
+<div class="preview-container">
+    <SImagePreview src="/animals.webp" icon="magnifying-glass-plus">
+        <template #icon>
+            🔍
+        </template>
+    </SImagePreview>
+</div>
+```
+
+## Интерфейс компонента
+
+### Свойства (Props)
+
+| Название | Тип | По умолчанию | Описание |
+|----------|-----|--------------|----------|
+| src | string | undefined | URL полноразмерного изображения, показываемого в модальном окне. |
+| preview | string | undefined | URL миниатюры. Если не указан, используется `src`. |
+| icon | string \| string[] | `'magnifying-glass'` | Имя иконки FontAwesome для оверлея при наведении. |
+
+### Слоты (Slots)
+
+| Название | Описание |
+|----------|----------|
+| preview | Полностью заменяет стандартный элемент `<img>` миниатюры. |
+| icon | Заменяет иконку увеличения, появляющуюся при наведении. |
+
+<style lang="scss">
+.preview-container {
+    max-width: 200px;
+}
+</style>

package/llms/components/interfaces/snote.md

@@ -0,0 +1,64 @@
+# SNote
+
+Текстовая заметка.
+
+<SToggle title="В чем отличие от аналогов?">
+    <p>В отличие от популярных библиотек компонентов для Vue3:</p>
+    <ol>
+        <li>Привязка к FontAwesome, который бесплатен и оптимально решает задачи иконок для стартапов.</li>
+    </ol>
+</SToggle>
+
+## Базовый пример
+
+```vue
+<template>
+    <SNote>Стандартный стиль (основной цвет)</SNote>
+    <SNote gray>В сером цвете</SNote>
+    <SNote attention>Привлечение внимания</SNote>
+    <SNote success>Успешное действие</SNote>
+    <SNote error>Описание ошибки</SNote>
+</template>
+
+<script setup>
+import { SNote } from 'startup-ui'
+</script>
+```
+
+## С иконкой и заголовком
+
+```vue
+<template>
+    <SNote icon="circle-info" title="В проекте ещё нет ключевиков">
+        <ol>
+            <li>Добавьте как можно больше запросов, заходы по которым из поиска приносят вам наибольший доход.</li>
+            <li>Сервис оценит конкуренцию, шанс выхода в топ и бюджет по каждому ключевику.</li>
+        </ol>
+    </SNote>
+</template>
+
+<script setup>
+import { SNote } from 'startup-ui'
+</script>
+```
+
+В качестве иконок используются названия иконок font-awesome.
+
+## Интерфейс компонента
+
+### Свойства (Props)
+
+| Название | Тип | По умолчанию | Описание |
+|----------|-----|--------------|----------|
+| icon | string \| string[] | undefined | Имя иконки FontAwesome для отображения рядом с заголовком |
+| title | string | undefined | Текст заголовка, отображаемый сверху заметки |
+| gray | boolean | false | Стилизует заметку с серым (нейтральным) фоном |
+| attention | boolean | false | Стилизует заметку с желтым фоном (для предупреждений/внимания) |
+| success | boolean | false | Стилизует заметку с зеленым фоном (для сообщений об успехе) |
+| error | boolean | false | Стилизует заметку с красным фоном и границей (для ошибок) |
+
+### Слоты (Slots)
+
+| Название | Описание |
+|----------|----------|
+| default | Основное содержимое заметки. Поддерживает текст или HTML (абзацы, списки и т.д.) |

package/llms/components/interfaces/sprogressbar.md

@@ -0,0 +1,48 @@
+# SProgressBar
+
+Полоска прогресса.
+
+<SToggle title="В чем отличие от аналогов?">
+    <p>В отличие от популярных библиотек компонентов для Vue3:</p>
+    <ol>
+        <li>Есть лейбл-пояснение, формирующий ожидание пользователей, упрощенный до одного атрибута.</li>
+    </ol>
+</SToggle>
+
+## Базовый пример
+
+```vue
+<template>
+    <SProgressBar :percentage="readyPercentage">Обновляем проект...</SProgressBar>
+</template>
+<script setup>
+import { ref } from 'vue'
+import { SProgressBar } from 'startup-ui'
+
+const readyPercentage = ref(50)
+</script>
+```
+
+## Интерфейс компонента
+
+### Свойства (Props)
+
+| Название | Тип | По умолчанию | Описание |
+|----------|-----|--------------|----------|
+| percentage | number | undefined | Обязательный. Текущее значение прогресса от 0 до 100. |
+
+### Слоты (Slots)
+
+| Название | Описание |
+|----------|----------|
+| default | Текстовая метка, отображаемая рядом с полосой прогресса (например, «Обновляем проект...»). |
+
+<script setup lang="ts">
+import SToggle from '../../../../packages/startup-ui/src/components/SToggle.vue';
+</script>
+
+<style lang="scss">
+.s-progressbar {
+    color: var(--s-text);
+}
+</style>

package/llms/components/interfaces/sstat.md

@@ -0,0 +1,79 @@
+# SStat
+
+Строка статистики, выровненная по заголовкам.
+
+<SToggle title="В чем отличие от аналогов?">В популярных библиотеках компонентов для Vue3 прямого аналога нет.</SToggle>
+
+## Базовый пример
+
+```vue
+<template>
+    <SStat title="Кол-во платежей">112</SStat>
+    <SStat title="Сумма платежей">777 000 ₽</SStat>
+</template>
+
+<script setup>
+import { SStat } from 'startup-ui'
+</script>
+```
+
+## Кастомный заголовок
+
+```vue
+<SStat>
+    <template #title>
+        Сумма платежей <STooltip>За выбранный период</STooltip>
+    </template>
+    777 000 ₽
+</SStat>
+```
+
+## Модификаторы
+
+С помощью логических (boolean) свойств можно изменить внешний вид строки:
+
+```vue
+<template>
+    <!-- large — крупный текст значения -->
+    <SStat title="Выручка" large>777 000 ₽</SStat>
+
+    <!-- nowrap запрещает перенос текста, обрезая его многоточием -->
+    <SStat title="Описание" nowrap>Очень длинное описание, которое может не поместиться...</SStat>
+
+    <!-- wide выравнивает заголовок и значение по краям (space-between) -->
+    <SStat title="Элементы" wide>10</SStat>
+</template>
+
+<script setup>
+import { SStat } from 'startup-ui'
+</script>
+```
+
+## Интерфейс компонента
+
+### Свойства (Props)
+
+| Название | Тип | По умолчанию | Описание |
+|----------|-----|--------------|----------|
+| title | string | undefined | Подпись для статистики. |
+| value | string \| number | undefined | Альтернатива базовому слоту: передает значение статистики через атрибут. |
+| nowrap | boolean | `false` | Запрещает перенос текста и использует многоточие для длинных значений. |
+| large | boolean | `false` | Увеличивает размер шрифта и высоту строки для значения. |
+| wide | boolean | `false` | Использует `justify-content: space-between`, чтобы прижать значение к правому краю. |
+
+### Слоты (Slots)
+
+| Название | Описание |
+|----------|----------|
+| default | Основное содержимое для значения статистики. Имеет приоритет над атрибутом `value`. |
+| title | Для кастомного заголовка (например, с иконками или тултипами). Имеет приоритет над атрибутом `title`. |
+
+<script setup lang="ts">
+import SToggle from '../../../../packages/startup-ui/src/components/SToggle.vue';
+</script>
+
+<style lang="scss" scoped>
+.s-stat {
+    margin: 0;
+}
+</style>