$ show sutras/sard-uniapp
Sard Uniapp is a UI component library built on Uniapp + Vue 3 framework providing 117+ reusable components for cross-platform application development. The library follows a modular architecture where each component includes implementation, type definitions, styling, and unit tests. Key features include tree shaking support, TypeScript integration, theme customization, internationalization, dark mode support, and >80% unit test coverage. The library is designed for multi-end compatibility targeting H5, WeChat mini-program, Alipay mini-program, and native Apps (excluding nvue/uvue).
The LLM identified 10 files worth highlighting for reuse:
Self-contained BEM (Block Element Modifier) utility for generating consistent class names. Implements proper escaping and follows BEM methodology strictly. Could be extracted to any CSS-in-JS or traditional CSS project with minimal modification.
HTTP client wrapper around uni.request with request/response interceptors. Provides middleware-like functionality for HTTP operations. Clean implementation that could be adapted to other platforms (fetch, axios) with minimal changes to the adapter layer.
Z-index management system for controlling popup/modal layering. Implements a singleton pattern with stack management to prevent z-index conflicts. Framework-agnostic core logic that could be extracted with minor Vue-specific adaptations.
Wrapper around the Intersection Observer API with proper cleanup and reactivity handling. Provides a reusable way to detect element visibility changes. Works in any web environment with minimal adaptation needed.
Icon component supporting multiple icon sources (custom fonts, built-in, images) with automatic sizing and fallback mechanisms. Abstracts icon font usage complexities while providing a clean API. Core logic is framework-agnostic.
Foundation component for popups, dialogs, and overlays with proper transition handling, focus management, and Vue Teleport integration. Manages enter/leave transitions and provides a reusable base for all popup-based components.
Complete form management system with context-based state sharing, validation rules, and async validation support. Implements field-level validation with comprehensive rule handling. Validation logic could be adapted to other frameworks with minimal changes.
Form composition function encapsulating form state, validation, and reset functionality. Provides reactive form handling with integrated validation. Core logic is framework-agnostic and could be extracted with minor Vue-specific adaptations.
Self-contained loading indicator component with proper sizing, theming integration, and customizable appearance. Simple yet complete implementation with minimal dependencies that demonstrates good component encapsulation practices.
Reusable composition function for Intersection Observer API with automatic cleanup and proper reactivity handling. Detects element visibility changes for lazy loading, infinite scroll, and similar patterns. Works across different Vue 3 environments.