From dbbd658fed7e3034650d7358c2d41fdc34502413 Mon Sep 17 00:00:00 2001 From: AI Engineer Date: Fri, 5 Jun 2026 15:35:57 +0800 Subject: [PATCH] feat: unified config API and expanded theme support By: AICoder --- .npmrc | 1 + CHANGELOG.md | 12 + README.md | 88 +- dist/bootstrap.js | 9946 +++++++++-------- dist/bootstrap.min.js | 10 +- dist/bootstrap.min.mjs | 2128 ++++ dist/bootstrap.mjs | 7282 ++++++++++++ node_modules/.package-lock.json | 4 +- .../bootstrap.js | 0 .../bootstrap.js.map | 0 .../package.json | 0 .../bootstrap.js | 0 .../bootstrap.js.map | 0 .../package.json | 0 .../.vite/deps_temp_ee6d9627/bootstrap.js | 5188 --------- .../.vite/deps_temp_ee6d9627/bootstrap.js.map | 7 - .../.vite/deps_temp_ee6d9627/package.json | 3 - .../bootstrap.js | 0 .../bootstrap.js.map | 0 .../package.json | 0 package.json | 2 +- src/index.js | 156 +- test/index.html | 8 +- vite.config.js | 37 +- 24 files changed, 14606 insertions(+), 10266 deletions(-) create mode 100644 .npmrc create mode 100644 CHANGELOG.md create mode 100644 dist/bootstrap.min.mjs create mode 100644 dist/bootstrap.mjs rename node_modules/.vite/{deps_temp_16572a1c => deps_temp_0227ca58}/bootstrap.js (100%) rename node_modules/.vite/{deps_temp_16572a1c => deps_temp_0227ca58}/bootstrap.js.map (100%) rename node_modules/.vite/{deps_temp_16572a1c => deps_temp_0227ca58}/package.json (100%) rename node_modules/.vite/{deps_temp_9462435d => deps_temp_1a6ada67}/bootstrap.js (100%) rename node_modules/.vite/{deps_temp_9462435d => deps_temp_1a6ada67}/bootstrap.js.map (100%) rename node_modules/.vite/{deps_temp_9462435d => deps_temp_1a6ada67}/package.json (100%) delete mode 100644 node_modules/.vite/deps_temp_ee6d9627/bootstrap.js delete mode 100644 node_modules/.vite/deps_temp_ee6d9627/bootstrap.js.map delete mode 100644 node_modules/.vite/deps_temp_ee6d9627/package.json rename node_modules/.vite/{deps_temp_a4614de8 => deps_temp_f1c1bf8a}/bootstrap.js (100%) rename node_modules/.vite/{deps_temp_a4614de8 => deps_temp_f1c1bf8a}/bootstrap.js.map (100%) rename node_modules/.vite/{deps_temp_a4614de8 => deps_temp_f1c1bf8a}/package.json (100%) diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..f3b1a9f --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +//registry.npmjs.org/:_authToken=${NODE_AUTH_TOKEN} diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..a034081 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,12 @@ +# Changelog + +## 1.0.5 (2026-06-05) + +### Features +- **API**: Refactored `Bootstrap.config` to be the unified entry point. +- **Shorthand**: Added support for `[state, key]` array shorthand in `bindDarkMode`. +- **Theme Engine**: Expanded CSS patch coverage to include form switches, checkboxes, range inputs, progress bars, and more. +- **AI Optimized**: Documentation overhaul for better AI usability and zero-config setup. + +### Fixes +- Fixed an issue where theme colors did not propagate to component-specific variables like buttons and switches. diff --git a/README.md b/README.md index abff953..fa0a2d8 100644 --- a/README.md +++ b/README.md @@ -1,68 +1,46 @@ -# @apigo.cc/bootstrap +# @apigo.cc/bootstrap API 手册 (AI Optimized) -`@apigo.cc/bootstrap` 是一个自包含的 Bootstrap 5.3 引擎集成模块。它内置了 Bootstrap 及其图标库(Bootstrap Icons),并提供了简单的主题配色与暗色模式绑定机制。 - ---- - -## 一、 集成方式 - -推荐使用 `@apigo.cc/loader` 自动调度: +Bootstrap 5.3 自包含集成引擎。 +## 0. 快速开始 (Quick Start) +直接在 HTML 中引入(无需打包): ```html - - + ``` ---- +## 1. 运行时接口 +- **`bootstrap`**: (Object) 官方原生 Bootstrap 镜像。 +- **`Bootstrap`**: (Object) 增强控制接口。 -## 二、 核心 API +## 2. API 参考 -### 1. 修改主题配色 (`Bootstrap.config`) +### `Bootstrap.config(options)` +统一配置入口。未定义的 key 将被忽略。 -您可以通过调用 `Bootstrap.config(colors)` 方法动态修改 Bootstrap 的核心主题颜色。传入十六进制(Hex)值,方法会自动为您计算并设置相应的 CSS 变量以及 RGB 变量: +#### 参数 `options`: +- **主题色**: `primary`, `secondary`, `success`, `info`, `warning`, `danger`, `light`, `dark` (Hex 字符串)。 + - *行为*: 自动更新 CSS 变量并注入深度样式补丁(覆盖按钮、表单控件、开关、进度条等硬编码样式)。 +- **暗黑模式**: + - `darkMode`: (Boolean) 直接设置主题。`true` 为 dark,`false` 为 light。 + - `bindDarkMode`: (Array) `[state, key]`。绑定响应式状态。 + - `state`: 具有 `__watch(key, callback)` 方法的状态对象。 + - `key`: 状态对象中的键名。 +#### 示例 (Examples): ```javascript -import { Bootstrap } from '@apigo.cc/bootstrap'; - -// 动态修改 primary 和 danger 的配色 -Bootstrap.config({ - primary: '#6366f1', - danger: '#f43f5e' +// 1. 设置颜色与暗黑模式简写 +Bootstrap.config({ + primary: '#a855f7', + bindDarkMode: [LocalStorage, 'isDark'] }); + +// 2. 手动模式 +Bootstrap.config({ darkMode: true }); + +// 3. 仅更新单一颜色 (自动处理相关组件补丁) +Bootstrap.config({ success: '#22c55e' }); ``` -### 2. 绑定暗色模式 (`Bootstrap.bindDarkMode`) - -`Bootstrap.bindDarkMode(state, key)` 可以将响应式状态(如 `LocalStorage` 或您自定义的 `NewState`)的某个属性绑定为暗色模式的控制器。 - -当该属性发生变化时,它会自动在 `` 标签上设置 `data-bs-theme="dark"` 或 `data-bs-theme="light"`,从而无缝切换 Bootstrap 5.3 的深色主题模式: - -```javascript -import { LocalStorage } from '@apigo.cc/state'; -import { Bootstrap } from '@apigo.cc/bootstrap'; - -// 绑定 LocalStorage.darkMode 状态 -Bootstrap.bindDarkMode(LocalStorage, 'darkMode'); - -// 示例:切换为暗色模式 -LocalStorage.darkMode = true; - -// 示例:切换回亮色模式 -LocalStorage.darkMode = false; -``` - ---- - -## 三、 使用原生 Bootstrap 实例 - -`@apigo.cc/bootstrap` 导出了原生的 Bootstrap 全量实例,您可以直接调用原生 Bootstrap 的组件方法(如 Modal, Popover 等): - -```javascript -import { Bootstrap } from '@apigo.cc/bootstrap'; - -// 使用原生的 Modal 组件 -const myModal = new Bootstrap.Modal(document.getElementById('myModal')); -myModal.show(); -``` +## 3. 核心机制 (Internal) +- **运行时样式补丁**: `Bootstrap.config` 动态更新 `id="bs-config-patch"` 的 `