Об этом проекте
web-ui-pack — это универсальный веб-пакет, предоставляющий высокомасштабируемые Web Components и вспомогательные утилиты, с акцентом на удобство для разработчиков. Он написан на TypeScript и поставляется с обширной JSDoc-документацией, поэтому редакторы могут отображать детали о свойствах, параметрах и использовании через intellisense.
Ключевые характеристики, описанные в README:
- Не зависит от фреймворков: может использоваться с Angular, React, Vue или простым HTML и JavaScript, поскольку логика является нативной для браузера и не требует внешнего выполнения.
- Элементы форм готовы к использованию со встроенной логикой валидации, и проект заявляет о фокусе на лучших практиках веб-доступности.
- Компоненты спроектированы для наследования и настройки; значения по умолчанию можно изменять для каждого класса или элемента, а поведение можно переопределять через прототипы или подклассы.
- CSS-переменные поддерживают настраиваемые цветовые темы, а темная цветовая схема доступна при добавлении атрибута `wupdark`.
- Включены типы TypeScript, а также поддержка `.jsx/.tsx` для React/Preact.
- Локализация обрабатывается через помощник `localeInfo`, с возможностью переопределения сообщений через глобальную функцию.
- Оптимизирован для tree-shaking в webpack через опцию side-effects; пакет имеет нулевую зависимость.
- Проект заявляет о 100% покрытии тестами через модульные и e2e-тесты, а также о фокусе на производительности и низком потреблении памяти.
Компоненты, перечисленные как доступные, включают DropdownElement, SortElement, SpinElement, CircleElement, PopupElement, ModalElement (с модальным окном внутри модального, подтверждающим модальным окном, хуком подтверждения и модальной формой), Notify, FormElement и набор элементов управления: SwitchControl, CheckControl, RadioControl, TextControl (с маской/шаблоном), TextareaControl, PasswordControl, NumberControl, SelectControl, SelectManyControl, TimeControl, DateControl и CalendarControl. Несколько элементов отмечены как еще не завершенные, например SliderControl, FileControl, ImageControl, ColorControl, MediaPlayer, InfiniteScroll, VirtualScroll, CarouselElement и TableElement.
Помощники сгруппированы по областям: анимация (animateDropdown, animateStack), DOM (findScrollParent, focusFirst, isIntoView, scrollIntoView, WUPScrolled), дата (dateCompareWithoutTime, dateCopyTime, dateFromString, dateToString), математика (mathFixFP, mathScaleValue, mathRotate), объект (nestedProperty, objectClone, objectToFormData, observer), событие (onEvent, onFocusGot, onScroll, onScrollStop, onFocusLost, onSpy), строка (stringLowerCount, stringUpperCount, stringPrettify), другое (promiseWait, localeInfo, TimeObject) и файлы (zip, exportToExcel, saveAsFile, csv).
Установка осуществляется через npm, после чего импортируется компонент и вызывается его статический метод `$use()` для регистрации пользовательского элемента. В README также документируются настройки VSCode для пользовательских данных HTML, отмечается, что библиотека компилируется в ESNext и может потребоваться включение в babel-loader для старых браузеров, а также предоставляются рекомендации по устранению неполадок для нераспознанных тегов.
Comments
0 Rating appears after 10 ratings
Sign in to join the discussion.