基础 UI 组件辅助工具

简介

基础 UI 组件辅助工具，属于 GZMJS 项目的基础库。

版本

当前版本：0.4.0

包名

@gzmjs/ui-basic

功能特性

• 提供基础 UI 组件和辅助工具
• 自定义元素和 Web Components 支持
• 主题系统和样式管理
• 对话框和提示组件
• 与 GZMJS 生态系统无缝集成

安装

pnpm add @gzmjs/ui-basic

依赖关系

本包无外部依赖。

使用方法

核心导出

本包提供以下模块：

attr (000-helper/attr)

center (000-helper/center)

corner (000-helper/corner)

element (000-helper/element)

helper (000-helper/helper)

lang (000-helper/lang)

style (000-helper/style)

theme (000-helper/theme)

iconCache (003-accessory/iconCache)

dialog (011-dialog/dialog)

show (011-dialog/show)

badge (003-accessory/badge)

close (003-accessory/close)

icon (003-accessory/icon)

tooltip (003-accessory/tooltip)

progress (003-accessory/progress)

circle (011-dialog/circle)

使用示例

import { } from '@gzmjs/ui-basic';

// TODO: 添加使用示例

核心功能模块

1. 属性装饰器 (000-helper/attr)

提供 HTML 属性处理的装饰器：

• getSnakeCaseName() - 将驼峰命名转换为蛇形命名
• @strAttr - 字符串属性装饰器
• @boolAttr - 布尔属性装饰器
• @intAttr - 整数属性装饰器
• @numAttr - 数字属性装饰器
• @saAttr - 字符串数组属性装饰器

2. 居中辅助 (000-helper/center)

提供元素居中和定位功能：

• AttachBorder - 附着边框类型
• TransitionPopup - 过渡弹窗接口
• CenterHelper - 居中辅助类

3. 角落定位 (000-helper/corner)

提供角落定位功能：

• Corner - 角落类型
• isLeftCorner() - 判断是否为左侧角落
• isTopCorner() - 判断是否为顶部角落
• makeCorner() - 创建角落类型
• CornerHelper - 角落辅助类

4. 元素定义 (000-helper/element)

提供自定义元素定义工具：

• defineElement() - 定义自定义元素的装饰器
• AttributeHandlers - 属性处理器类型

5. 工具函数 (000-helper/helper)

通用工具函数：

• debounce() - 防抖函数
• generateId() - 生成唯一 ID

6. 文本处理 (000-helper/lang)

提供文本处理和国际化支持：

• globalTexts - 全局文本对象
• createText() - 创建可绑定文本
• GT - 全局文本代理

7. 样式管理 (000-helper/style)

提供样式表创建和管理：

• createStyleSheet() - 创建样式表
• getElementRules() - 获取元素样式规则
• utilityStyleClass - 实用样式类
• utilityStyle - 实用样式表
• onlyChildStyle - 唯一子元素样式
• createTxtBtn() - 创建文本按钮
• createLnkBtn() - 创建链接按钮

8. 主题系统 (000-helper/theme)

提供主题切换和管理：

• themeVariables - 主题变量
• getCurrentTheme() - 获取当前主题
• setCurrentTheme() - 设置当前主题
• allThemes - 所有可用主题

9. 徽章组件 (003-accessory/badge)

• <GZM-BADGE> - 徽章组件
• Badge - 徽章类

10. 关闭按钮 (003-accessory/close)

• <GZM-CLOSE-BTN> - 关闭按钮组件
• CloseBtn - 关闭按钮类

11. 图标组件 (003-accessory/icon)

• <GZM-ICON> - 图标组件
• Icon - 图标类
• iconCache - 图标缓存
• 预定义图标：radioUnchecked, radioChecked, checkboxUnchecked, checkboxChecked

12. 提示框 (003-accessory/tooltip)

• <GZM-TOOLTIP> - 提示框组件
• TtOptions - 提示框选项接口

13. 进度圆环 (003-accessory/progress)

• <GZM-PROGRESS-CIRCLE> - 进度圆环组件
• ProgressCircle - 进度圆环类

14. 检查圆圈 (011-dialog/circle)

• <GZM-CHECK-CIRCLE> - 检查圆圈组件
• CheckCircle - 检查圆圈类

15. 对话框 (011-dialog/dialog)

提供对话框创建功能：

• DialogOptions - 对话框选项接口
• createDialog() - 创建对话框
• showDockRightModalDlg() - 显示右侧停靠模态对话框
• showDockBottomModalDlg() - 显示底部停靠模态对话框

16. 对话框显示 (011-dialog/show)

提供常用对话框显示函数：

• showWaiting() - 显示等待对话框
• showError() - 显示错误对话框
• showAlert() - 显示警告对话框

构建

pnpm run build

许可证

本项目采用 ISC 许可证。