这个项目能做什么
web-ui-pack 是一个通用 Web 包,提供高度可扩展的 Web 组件和辅助工具,注重开发者体验。它使用 TypeScript 编写,并附带详尽的 JSDoc 文档,使编辑器能通过智能提示展示属性、选项和用法详情。
README 中描述的关键特性:
- 框架无关:可用于 Angular、React、Vue 或纯 HTML 和 JavaScript,因为逻辑是浏览器原生的,无需外部运行时。
- 表单控件开箱即用,内置验证逻辑,项目强调 Web 无障碍最佳实践。
- 组件设计支持继承和定制;默认值可按类或元素更改,行为可通过原型或子类覆盖。
- CSS 变量支持自定义颜色主题,添加 `wupdark` 属性可启用深色配色方案。
- 包含 TypeScript 类型,并支持 React/Preact 的 `.jsx/.tsx`。
- 通过 `localeInfo` 辅助工具处理本地化,消息可通过全局函数覆盖。
- 通过 side-effects 选项优化 webpack 树摇;包零依赖。
- 项目声称通过单元和端到端测试实现 100% 覆盖率,并注重性能和低内存消耗。
可用组件包括 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 中,并提供未识别标签的故障排除指南。
评论
0 评分人数达到10人后显示
登录后参与讨论。