UI Kit

@azure-net/ui-kit предоставляет виджеты Svelte и утилиты для DOM. Этот раздел описывает текущие исходники соседнего пакета (версия в package.json: 0.4.7).

Установка

pnpm add @azure-net/ui-kit

Объявленные peer-зависимости: Svelte ^5.29.0 и SvelteKit >=2.16.0. Реализация использует attachments и $props.id(). В проверенном рабочем окружении установлен Svelte 5.57.2. Для компиляции пакета используйте интеграцию SvelteKit/Vite с Svelte. @azure-net/tools ^2.1.0 устанавливается как обычная зависимость. Регистрация приложения через @azure-net/kit не требуется.

Точки входа

import { clickOutside, masked, createZoomable } from '@azure-net/ui-kit';
import { Slider, Cropper, ModalContainer, NotificationContainer } from '@azure-net/ui-kit/widgets';
import '@azure-net/ui-kit/slider.css'; // Только необязательное оформление Slider

Корневая точка входа экспортирует только утилиты. Виджеты импортируются из /widgets. Публичных путей /components, /utils и глубоких импортов /dist нет. Для базового расположения виджетов глобальный CSS не требуется; оформление Slider включается сочетанием импорта CSS и styled={true}.

Перечень runtime-экспортов

В двух публичных barrel-файлах найдены следующие 23 runtime-экспорта. Для каждой группы ниже есть описание API и примеры.

Точка входа	Экспорты	Руководство
/widgets	ModalContainer, modalManager	Модальные окна
/widgets	NotificationContainer, notificationManager	Уведомления
/widgets	Slider	Slider
/widgets	Cropper	Cropper
/widgets	progressBar, useRouteLoadBar	Индикатор загрузки
root	zoomable, createZoomable	Масштабирование
root	useAnimate, attachAnimation	Анимации
root	event, once, stop, immediate, prevent	DOM-утилиты
root	clickOutside, onClickOutside	DOM-утилиты
root	masked, Mask, masks, scrollTo	DOM-утилиты

Пакет не экспортирует createZoom, компонент ProgressBar, компонент Modal, Button или Input. Modal является типом; стандартный шаблон модального окна внутренний.

Публичные типы

Используйте import type из указанной точки входа. Если тип props компонента не экспортирован по имени, его можно получить через Svelte ComponentProps<typeof Component>.

Точка входа	Типы
root	EventHandler, OnClickOutsideOptions, OnClickOutsideEventDetail, OnClickOutsideEventType, MaskedOptions, MaskValue, ScrollToOptions, UseAnimateOptions, ZoomController, ZoomTransform, ZoomPoint, ZoomableOptions
/widgets	NotificationThemes, NotificationPositions, Notification, NotificationConfig, ModalOptions, ModalConfig, Modal, ModalTemplateProps, StoredModal, PropsWithCloseModal, ProgressBarManager, ProgressBarOptions, CropperApi, CropperExportOptions, CropperProps, CropRect, SliderApi, SliderProps, SliderLayout

Объявления ModalHandle, ModalContainerProps, NotificationContainerProps, CropperResizeHandle, Tokens и TokenSettings не являются именованными экспортами публичных точек входа. Наличие типа в исходниках не означает, что следует импортировать его внутренним путём.

Корневой layout и SSR

<script lang="ts">
  import { ModalContainer, NotificationContainer } from '@azure-net/ui-kit/widgets';
  let { children } = $props();
</script>

{@render children()}
<ModalContainer />
<NotificationContainer />

Разместите по одному контейнеру каждого вида в постоянном layout. Менеджеры получают свои хранилища при монтировании; открытие окон или уведомлений во время SSR либо до монтирования завершается ошибкой. Удобнее открывать их из обработчиков пользовательских событий. Не сохраняйте данные конкретного серверного запроса в глобальном состоянии менеджеров.

Slider выводит слайды и адаптивный CSS на сервере; измерения и взаимодействия начинаются в браузере. Cropper выводит строковые источники изображений при SSR, но экспорт доступен только в браузере после загрузки изображения. Создание zoom-контроллера безопасно для SSR, а attachments/actions работают с DOM после монтирования. scrollTo на сервере возвращает false. DOM-операции индикатора загрузки требуют браузера.

Доступность и оформление

Slider и Cropper поддерживают управление с клавиатуры. Контейнер модального окна задаёт роль dialog, но не реализует удержание фокуса внутри окна и возврат фокуса: добавьте это в приложении вместе с доступным названием диалога. Уведомления не являются live region автоматически; для озвучивания используйте собственный snippet. Само подключение виджета не гарантирует полную доступность интерфейса.

Примеры используют snippets, callback props и attachments Svelte 5. Встроенные надписи переведены не полностью; пользовательские элементы управления Slider и snippets уведомлений позволяют задать свой язык. Подробности оформления и поведения приведены на страницах виджетов.