wedux-ui 0.1.0 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +32 -108
  2. package/miniprogram_dist/components/theme-provider/presets.js +2 -2
  3. package/package.json +10 -1
  4. package/miniprogram_dist/styles/demo.scss +0 -96
package/README.md CHANGED
@@ -1,34 +1,30 @@
1
- <p align="center">
2
- <img src="https://img.shields.io/npm/v/wedux-ui?color=a1b858&label=npm" alt="npm version" />
3
- <img src="https://img.shields.io/npm/l/wedux-ui?color=50a36f" alt="license" />
4
- <img src="https://img.shields.io/badge/platform-wechat--miniprogram-07c160" alt="platform" />
5
- </p>
1
+ # wedux-ui
6
2
 
7
- <h1 align="center">wedux-ui</h1>
3
+ 轻量、可定制的微信小程序原生组件库
8
4
 
9
- <p align="center">轻量、可定制的微信小程序原生组件库</p>
5
+ ![npm version](https://img.shields.io/npm/v/wedux-ui?color=a1b858&label=npm)
6
+ ![license](https://img.shields.io/npm/l/wedux-ui)
7
+ ![platform](https://img.shields.io/badge/platform-wechat--miniprogram-07c160)
10
8
 
11
- <p align="center">
12
- 零依赖 · CSS 变量主题 · 深色模式 · 50+ 组件
13
- </p>
9
+ `零依赖` · `CSS 变量主题` · `深色模式` · `50+ 组件` · `表单驱动`
14
10
 
15
11
  ---
16
12
 
17
- ## 特性
18
-
19
- - **零依赖** — 纯原生小程序，无 npm 运行时依赖
20
- - **主题定制** — 基于 CSS 变量的 Design Token 体系，支持组件级覆盖
21
- - **深色模式** — 内置 light / dark 预设，跟随系统或手动切换
22
- - **按需引用** — 只注册用到的组件，不增加包体积
23
- - **表单驱动** — 完整的 Form / FormItem 校验体系，统一表单组件行为
24
-
25
13
  ## 安装
26
14
 
27
15
  ```bash
28
16
  npm install wedux-ui
29
17
  ```
30
18
 
31
- 安装后在**微信开发者工具**中点击 **工具 → 构建 npm**，等待构建完成即可使用。
19
+ 安装后在**微信开发者工具**中点击 **工具 → 构建 npm**，等待构建完成。
20
+
21
+ 在项目全局样式文件 `app.wxss` 中引入：
22
+
23
+ ```scss
24
+ @import 'wedux-ui/src/styles/iconfont.scss';
25
+ @import 'wedux-ui/src/styles/tokens.scss';
26
+ @import 'wedux-ui/src/styles/theme.scss';
27
+ ```
32
28
 
33
29
  ## 快速上手
34
30
 
@@ -37,8 +33,7 @@ npm install wedux-ui
37
33
  ```json
38
34
  {
39
35
  "usingComponents": {
40
- "w-button": "wedux-ui/components/button/button",
41
- "w-input": "wedux-ui/components/input/input"
36
+ "w-button": "wedux-ui/components/button/button"
42
37
  }
43
38
  }
44
39
  ```
@@ -47,89 +42,23 @@ npm install wedux-ui
47
42
 
48
43
  ```html
49
44
  <w-button type="primary" bind:tap="onTap">提交</w-button>
50
- <w-input placeholder="请输入" bind:change="onChange" />
51
45
  ```
52
46
 
53
47
  ## 组件一览
54
48
 
55
- ### 通用
56
-
57
- | 组件 | 说明 |
58
- | ----------- | ---------------- |
59
- | Button | 按钮 |
60
- | ButtonGroup | 按钮组 |
61
- | FloatButton | 浮动按钮 |
62
- | Icon | 图标（iconfont） |
63
-
64
- ### 布局
65
-
66
- | 组件 | 说明 |
67
- | ------- | --------------------------------------------- |
68
- | Flex | 弹性布局 |
69
- | Layout | 页面布局（Header / Content / Footer / Sider） |
70
- | Divider | 分割线 |
71
-
72
- ### 数据展示
73
-
74
- | 组件 | 说明 |
75
- | -------------------- | ------------- |
76
- | Avatar / AvatarGroup | 头像 / 头像组 |
77
- | Badge | 徽标 |
78
- | Card | 卡片 |
79
- | Ellipsis | 文本省略 |
80
- | GradientText | 渐变文字 |
81
- | H | 标题 |
82
- | Highlight | 文本高亮 |
83
- | List / ListItem | 列表 |
84
- | NumberAnimation | 数字动画 |
85
- | QrCode | 二维码 |
86
- | Tag | 标签 |
87
- | Watermark | 水印 |
88
- | Tree | 树形控件 |
89
-
90
- ### 数据录入
91
-
92
- | 组件 | 说明 |
93
- | ------------------------ | ------------- |
94
- | Form / FormItem | 表单 / 表单项 |
95
- | Input | 输入框 |
96
- | Textarea | 多行输入 |
97
- | InputOtp | 验证码输入 |
98
- | Select | 选择器 |
99
- | Switch | 开关 |
100
- | Radio / RadioGroup | 单选 |
101
- | Checkbox / CheckboxGroup | 多选 |
102
- | Rate | 评分 |
103
- | Stepper | 步进器 |
104
- | DatePicker | 日期选择 |
105
- | TimePicker | 时间选择 |
106
- | Calendar | 日历 |
107
- | ColorPicker | 颜色选择 |
108
- | TreeSelect | 树选择 |
109
- | Upload | 上传 |
110
-
111
- ### 导航
112
-
113
- | 组件 | 说明 |
114
- | ------------- | ------------ |
115
- | NavigationBar | 自定义导航栏 |
116
- | TabBar | 标签栏 |
117
- | BackTop | 回到顶部 |
118
-
119
- ### 反馈
120
-
121
- | 组件 | 说明 |
122
- | -------------- | -------- |
123
- | Drawer | 抽屉 |
124
- | Popover | 弹出气泡 |
125
- | Tooltip | 文字提示 |
126
- | InfiniteScroll | 无限滚动 |
127
-
128
- ### 主题
129
-
130
- | 组件 | 说明 |
131
- | ------------- | -------------- |
132
- | ThemeProvider | 主题配置提供者 |
49
+ **通用** — `Button` `ButtonGroup` `FloatButton` `Icon`
50
+
51
+ **布局** — `Flex` `Layout` `Divider`
52
+
53
+ **数据展示** — `Avatar` `AvatarGroup` `Badge` `Card` `Ellipsis` `GradientText` `H` `Highlight` `List` `ListItem` `NumberAnimation` `QrCode` `Tag` `Watermark` `Tree`
54
+
55
+ **数据录入** — `Form` `FormItem` `Input` `Textarea` `InputOtp` `Select` `Switch` `Radio` `RadioGroup` `Checkbox` `CheckboxGroup` `Rate` `Stepper` `DatePicker` `TimePicker` `Calendar` `ColorPicker` `TreeSelect` `Upload`
56
+
57
+ **导航** — `NavigationBar` `TabBar` `BackTop`
58
+
59
+ **反馈** — `Drawer` `Popover` `Tooltip` `InfiniteScroll`
60
+
61
+ **主题** — `ThemeProvider`
133
62
 
134
63
  ## 主题定制
135
64
 
@@ -167,14 +96,9 @@ page {
167
96
  ## 开发
168
97
 
169
98
  ```bash
170
- # 安装依赖
171
- pnpm install
172
-
173
- # 格式化代码
174
- pnpm format
175
-
176
- # 构建 npm 产物
177
- pnpm build
99
+ pnpm install # 安装依赖
100
+ pnpm format # 格式化代码
101
+ pnpm build # 构建 npm 产物
178
102
  ```
179
103
 
180
104
  使用**微信开发者工具**打开项目根目录即可预览 Demo。
package/miniprogram_dist/components/theme-provider/presets.js CHANGED
@@ -1,4 +1,4 @@
1
- export const light = {
1
+ export const lightTheme = {
2
2
  // Brand & Semantic Colors
3
3
  '--color-brand': '#07c160',
4
4
  '--color-danger': '#fa5151',
@@ -43,7 +43,7 @@ export const light = {
43
43
  '--w-avatar-bg': 'rgba(0, 0, 0, 0.08)',
44
44
  };
45
45
 
46
- export const dark = {
46
+ export const darkTheme = {
47
47
  // Brand & Semantic Colors
48
48
  '--color-brand': '#74a800',
49
49
  '--color-danger': '#cf4444',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "wedux-ui",
3
- "version": "0.1.0",
3
+ "version": "0.2.1",
4
4
  "description": "微信小程序组件库，支持主题切换",
5
5
  "miniprogram": "miniprogram_dist",
6
6
  "files": [
@@ -12,7 +12,16 @@
12
12
  "component",
13
13
  "ui"
14
14
  ],
15
+ "repository": {
16
+ "type": "git",
17
+ "url": "git+https://github.com/BitterBar/wxma-ui.git"
18
+ },
19
+ "author": "L",
15
20
  "license": "MIT",
21
+ "bugs": {
22
+ "url": "https://github.com/BitterBar/wxma-ui/issues"
23
+ },
24
+ "homepage": "https://github.com/BitterBar/wxma-ui#readme",
16
25
  "devDependencies": {
17
26
  "prettier": "^3.8.1"
18
27
  },
package/miniprogram_dist/styles/demo.scss DELETED
@@ -1,96 +0,0 @@
1
- // Shared styles for demo pages (imported via app.scss)
2
-
3
- .demo-page {
4
- width: 100%;
5
- height: 100vh;
6
- display: flex;
7
- flex-direction: column;
8
- }
9
-
10
- .demo-scroll {
11
- flex: 1;
12
- overflow: hidden;
13
- }
14
-
15
- .demo-content {
16
- padding: var(--spacing-md);
17
- padding-bottom: var(--spacing-xl);
18
- box-sizing: border-box;
19
- }
20
-
21
- .section {
22
- background: var(--color-bg-elevated);
23
- border-radius: var(--radius-md);
24
- padding: var(--spacing-md);
25
- margin-bottom: var(--spacing-md);
26
- display: flex;
27
- flex-direction: column;
28
- gap: var(--spacing-sm);
29
- }
30
-
31
- .section__title {
32
- font-size: var(--font-size-sm);
33
- color: var(--color-text-secondary);
34
- }
35
-
36
- .comp-header {
37
- margin-bottom: var(--spacing-md);
38
- }
39
-
40
- .comp-header__tag {
41
- font-size: var(--font-size-sm);
42
- color: var(--color-text-secondary);
43
- font-family: monospace;
44
- margin-bottom: var(--spacing-xs);
45
- }
46
-
47
- .comp-header__desc {
48
- font-size: var(--font-size-md);
49
- color: var(--color-text-primary);
50
- line-height: 1.5;
51
- }
52
-
53
- .prop-row {
54
- padding: var(--spacing-sm) 0;
55
- display: flex;
56
- flex-direction: column;
57
- gap: var(--spacing-xs);
58
- }
59
-
60
- .prop-row + .prop-row {
61
- border-top: 1rpx solid var(--color-separator);
62
- }
63
-
64
- .prop-row__meta {
65
- display: flex;
66
- align-items: center;
67
- gap: var(--spacing-sm);
68
- }
69
-
70
- .prop-row__name {
71
- font-size: var(--font-size-md);
72
- color: var(--color-text-primary);
73
- font-weight: bold;
74
- }
75
-
76
- .prop-row__type {
77
- font-size: var(--font-size-sm);
78
- color: var(--color-brand);
79
- }
80
-
81
- .prop-row__default {
82
- font-size: var(--font-size-sm);
83
- color: var(--color-text-secondary);
84
- margin-left: auto;
85
- }
86
-
87
- .prop-row__desc {
88
- font-size: var(--font-size-sm);
89
- color: var(--color-text-secondary);
90
- }
91
-
92
- .demo-hint {
93
- font-size: var(--font-size-sm);
94
- color: var(--color-text-secondary);
95
- margin-bottom: var(--spacing-xs);
96
- }