<PrLoader />
Подходит для inline loading-state внутри текста, кнопки или строки таблицы. Управление размерами не требует пропсов, компонент всегда компактный. Обязательных props и вариантов нет.
Загрузка списка компонентов<PrToggle />
Работает по v-model с булевым значением. Использовать для on/off состояния, когда нужен компактный переключатель, а не checkbox. Обязательных props нет; modelValue?: boolean , label?: string , disabled?: boolean .
<PrCheckbox />
Поддерживает обычный булев режим и циклический partial , если передан проп partial . Хорошо подходит для фильтров и tri-state выбора. Обязательных props нет; modelValue?: boolean | "partial" , partial?: boolean , invalid?: boolean , disabled?: boolean .
<PrInput />
Базовый input для простых строковых и числовых значений. Получает invalid , disabled , type , placeholder ; наружу отдаёт update:modelValue , input , blur , focus . Обязательных props нет; modelValue?: string | number | null , type?: HTMLInputTypeAttribute .
<PrTextarea />
Использовать для многострочного текста. Компонент принимает rows , disabled , placeholder и работает через update:modelValue . Обязательных props нет; modelValue?: string | null , rows?: number | string .
<PrSelect />
Передавать массив options формата { value, label, disabled? } . Компонент управляется строковым v-model , а placeholder рендерится отдельной disabled-опцией. Для нормальной работы нужен options ; тип значения: string | number | null | undefined .
<UiFile />
Компонент заворачивает скрытый input[type=file] в UiField и кнопку. Слушать change , второй аргумент события уже содержит массив File[] . Обязательных props нет; важные props: accept?: string , multiple?: boolean , label?: string , buttonLabel?: string .
<PrHint />
Нужен для короткой вторичной подписи над контролом или рядом с ним. Если text пустой, компонент ничего не рендерит. Обязательных props нет; text?: string .
Поддерживает только короткий вторичный текст.
<PrMessageError />
Рендерит role=alert только при наличии текста. Подходит для коротких форменных ошибок и валидации рядом с контролом. Обязательных props нет; text?: string .
Пример ошибки валидации.
<PrList />
Быстрый рендер простого массива строк как ul или ol . Когда нужен кастомный item layout, лучше писать разметку руками. Обязательный prop: items: string[] ; tag?: "ul" | "ol" .
- Button variants
- Inline loader
- Ghost links
- Define options
- Bind v-model
- Listen change when needed
<PrStack />
Использовать как верхнеуровневый layout-stack: он берёт прямых slot-детей и оборачивает их в секции с divide-y и p-4 . Обязательных props нет, API состоит только из default slot.
<UiField />
Нужен для одиночного контрола с label , hint , error , required . Вложенный PrInput или PrSelect получает field-id автоматически, поэтому id можно не дублировать вручную. Обязательных props нет; label?: string , hint?: string , error?: string , required?: boolean , forId?: string .
<UiFieldset />
Использовать, когда несколько контролов описывают одну группу. Компонент сам рендерит legend , hint и error . Обязательных props нет; label?: string , hint?: string , error?: string .
<UiScale />
Подходит для короткой порядковой шкалы. Каждая опция может задать собственный activeColor , а повторный клик по активному значению сбрасывает его в clearValue . Для нормальной работы нужен options ; элементы массива: { value: string, label: string, activeColor?: string } .
<UiTabs />
Обязательный props items массив объектов и mode : "model" | "path" , слот-панели именуются как #panel-intro="{item}" .
локальный UI → mode="model"
страница/раздел сайта → mode="path"
<UiSpoiler />
Управляется через v-model . Содержимое не удаляется из DOM, а только скрывается через v-show . Обязателен modelValue ; label?: string , iconPosition?: "left" | "right" .
- Состояние задаётся только через v-model
- Подходит для компактных FAQ-блоков
<UiTooltip />
Оборачивает trigger slot и показывает floating panel по text . Для позиционирования использует side , а видимость управляется hover/focus внутри компонента. Обязательных props нет; text?: string , side?: "top" | "right" | "bottom" | "left" .
Welcome to SINDESINDE — System for Integrated Networked Data Exchange and Happy New Year.
<UiImage />
Работает как viewer и как controller. Передавать items , опционально route-query-sync , а открытие делается через slot API open(index) . Для работы нужен items ; полезные props: initialIndex?: number , routeQuerySync?: boolean , routeQueryParam?: string .
<UiThumbnails />
Миниатюры живут отдельно от viewer и сами ничего не открывают. Нужно передать items , activeIndex и обработать select , если нужен контроль активного изображения. Обязательный prop: items ; activeIndex?: number , minItems?: number .
<UiAvatar />
Если нужен простой preview без auth-menu, использовать version="preview" и передавать user или src . Для layout navigation использовать стандартный button/menu режим. Обязательных props нет; version зависит от режима и обычно бывает preview или режим меню по умолчанию, clickable?: boolean .
<UiModelViewer />
Компонент требует валидный src на .glb/.gltf . В демо используется реальная модель Бора для неона по тому же пути, что и на странице элемента. Для реального сценария нужен src ; остальные props: title?: string , downloadName?: string .
<UiThemeSwitcher />
Переключает режим темы через useTheme().toggle() и эмитит change(mode) . Хорошо использовать в nav/header, где нужен один короткий контрол. Обязательных props нет; наружу отдаёт change(mode) , где mode : light | dark | system .
<UiScrollableEdges />
Это обёртка над scroll area. Состояние граней обычно приходит из useScrollableEdges(ref, { axis }) , а сам компонент рисует PrScrollEdge по edges или active . Обязательных props нет; axis : "x" | "y" | "both" , area : "full" | "trim-bottom" , layer : "default" | "raised" .
<UiDataTable />
Передавать columns и rows , а для нестандартной ячейки использовать cell-${'$'}{column.key} или общий slot cell . Компонент сам добавляет первую служебную колонку под индикатор loading. Обязательные props: columns: DataTableColumn[] , rows: DataTableRow[] ; дополнительно rowKey?: string | fn , nowrap?: boolean .
| Загрузка | Компонент | Тип | Статус |
|---|---|---|---|
| PrButton | Pr | stable | |
| UiTabs | Ui | stable | |
| UiCropperModal | Ui | asset-driven |
<UiCredits />
Использовать рядом с медиа, когда нужен attribution. Если все пропсы пустые, блок не рендерится. Обязательных props нет; основные поля: title?: string | null , author?: string | null , attribution?: string | null , sourceUrl?: string | null , license?: string | null , licenseUrl?: string | null .