wedux-ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Bitter Bar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,184 @@
+<p align="center">
+  <img src="https://img.shields.io/npm/v/wedux-ui?color=a1b858&label=npm" alt="npm version" />
+  <img src="https://img.shields.io/npm/l/wedux-ui?color=50a36f" alt="license" />
+  <img src="https://img.shields.io/badge/platform-wechat--miniprogram-07c160" alt="platform" />
+</p>
+
+<h1 align="center">wedux-ui</h1>
+
+<p align="center">轻量、可定制的微信小程序原生组件库</p>
+
+<p align="center">
+  零依赖 · CSS 变量主题 · 深色模式 · 50+ 组件
+</p>
+
+---
+
+## 特性
+
+- **零依赖** — 纯原生小程序，无 npm 运行时依赖
+- **主题定制** — 基于 CSS 变量的 Design Token 体系，支持组件级覆盖
+- **深色模式** — 内置 light / dark 预设，跟随系统或手动切换
+- **按需引用** — 只注册用到的组件，不增加包体积
+- **表单驱动** — 完整的 Form / FormItem 校验体系，统一表单组件行为
+
+## 安装
+
+```bash
+npm install wedux-ui
+```
+
+安装后在**微信开发者工具**中点击 **工具 → 构建 npm**，等待构建完成即可使用。
+
+## 快速上手
+
+在页面或组件的 `.json` 中注册：
+
+```json
+{
+  "usingComponents": {
+    "w-button": "wedux-ui/components/button/button",
+    "w-input": "wedux-ui/components/input/input"
+  }
+}
+```
+
+在 `.wxml` 中使用：
+
+```html
+<w-button type="primary" bind:tap="onTap">提交</w-button>
+<w-input placeholder="请输入" bind:change="onChange" />
+```
+
+## 组件一览
+
+### 通用
+
+| 组件        | 说明             |
+| ----------- | ---------------- |
+| Button      | 按钮             |
+| ButtonGroup | 按钮组           |
+| FloatButton | 浮动按钮         |
+| Icon        | 图标（iconfont） |
+
+### 布局
+
+| 组件    | 说明                                          |
+| ------- | --------------------------------------------- |
+| Flex    | 弹性布局                                      |
+| Layout  | 页面布局（Header / Content / Footer / Sider） |
+| Divider | 分割线                                        |
+
+### 数据展示
+
+| 组件                 | 说明          |
+| -------------------- | ------------- |
+| Avatar / AvatarGroup | 头像 / 头像组 |
+| Badge                | 徽标          |
+| Card                 | 卡片          |
+| Ellipsis             | 文本省略      |
+| GradientText         | 渐变文字      |
+| H                    | 标题          |
+| Highlight            | 文本高亮      |
+| List / ListItem      | 列表          |
+| NumberAnimation      | 数字动画      |
+| QrCode               | 二维码        |
+| Tag                  | 标签          |
+| Watermark            | 水印          |
+| Tree                 | 树形控件      |
+
+### 数据录入
+
+| 组件                     | 说明          |
+| ------------------------ | ------------- |
+| Form / FormItem          | 表单 / 表单项 |
+| Input                    | 输入框        |
+| Textarea                 | 多行输入      |
+| InputOtp                 | 验证码输入    |
+| Select                   | 选择器        |
+| Switch                   | 开关          |
+| Radio / RadioGroup       | 单选          |
+| Checkbox / CheckboxGroup | 多选          |
+| Rate                     | 评分          |
+| Stepper                  | 步进器        |
+| DatePicker               | 日期选择      |
+| TimePicker               | 时间选择      |
+| Calendar                 | 日历          |
+| ColorPicker              | 颜色选择      |
+| TreeSelect               | 树选择        |
+| Upload                   | 上传          |
+
+### 导航
+
+| 组件          | 说明         |
+| ------------- | ------------ |
+| NavigationBar | 自定义导航栏 |
+| TabBar        | 标签栏       |
+| BackTop       | 回到顶部     |
+
+### 反馈
+
+| 组件           | 说明     |
+| -------------- | -------- |
+| Drawer         | 抽屉     |
+| Popover        | 弹出气泡 |
+| Tooltip        | 文字提示 |
+| InfiniteScroll | 无限滚动 |
+
+### 主题
+
+| 组件          | 说明           |
+| ------------- | -------------- |
+| ThemeProvider | 主题配置提供者 |
+
+## 主题定制
+
+通过 `ThemeProvider` 组件覆盖设计变量：
+
+```html
+<w-theme-provider theme="{{theme}}">
+  <w-button type="primary">自定义主题</w-button>
+</w-theme-provider>
+```
+
+```js
+const { lightTheme } = require('wedux-ui/components/theme-provider/presets');
+
+Page({
+  data: {
+    theme: {
+      ...lightTheme,
+      '--w-primary-color': '#8b5cf6',
+    },
+  },
+});
+```
+
+也可以通过组件级 CSS 变量精确控制单个组件：
+
+```css
+page {
+  --w-btn-height: 44px;
+  --w-btn-radius: 12px;
+  --w-input-radius: 8px;
+}
+```
+
+## 开发
+
+```bash
+# 安装依赖
+pnpm install
+
+# 格式化代码
+pnpm format
+
+# 构建 npm 产物
+pnpm build
+```
+
+使用**微信开发者工具**打开项目根目录即可预览 Demo。
+
+## 协议
+
+[MIT](./LICENSE)

package/miniprogram_dist/behaviors/formField.js

@@ -0,0 +1,35 @@
+// src/behaviors/formField.js
+module.exports = Behavior({
+  data: {
+    _formItemSize: '',
+    _formItemDisabled: false,
+  },
+
+  methods: {
+    _setFormItemContext(ctx) {
+      this.setData({
+        _formItemSize: ctx.size || '',
+        _formItemDisabled: ctx.disabled || false,
+      });
+    },
+
+    _getFormItem() {
+      const nodes = this.getRelationNodes('../form-item/form-item');
+      return nodes && nodes.length > 0 ? nodes[0] : null;
+    },
+
+    _notifyChange() {
+      const formItem = this._getFormItem();
+      if (formItem) formItem._handleFieldChange();
+    },
+
+    _notifyBlur() {
+      const formItem = this._getFormItem();
+      if (formItem) formItem._handleFieldBlur();
+    },
+
+    _isDisabled() {
+      return this.data.disabled || this.data._formItemDisabled;
+    },
+  },
+});

package/miniprogram_dist/components/avatar/avatar.js

@@ -0,0 +1,70 @@
+Component({
+  relations: {
+    '../avatar-group/avatar-group': {
+      type: 'ancestor',
+      unlinked() {
+        this.setData({ _groupSize: '', _groupRound: false, _groupOverlap: false });
+      },
+    },
+  },
+
+  properties: {
+    size: {
+      type: String,
+      value: 'medium', // small | medium | large
+    },
+    src: {
+      type: String,
+      value: '',
+    },
+    round: {
+      type: Boolean,
+      value: false,
+    },
+    bordered: {
+      type: Boolean,
+      value: false,
+    },
+    color: {
+      type: String,
+      value: '',
+    },
+    fallbackSrc: {
+      type: String,
+      value: '',
+    },
+  },
+
+  data: {
+    _currentSrc: '',
+    _imgError: false,
+    _groupSize: '',
+    _groupRound: false,
+    _groupOverlap: false,
+  },
+
+  observers: {
+    src(src) {
+      this.setData({ _currentSrc: src, _imgError: false });
+    },
+  },
+
+  methods: {
+    handleImgError() {
+      const fallbackSrc = this.data.fallbackSrc;
+      if (fallbackSrc && this.data._currentSrc !== fallbackSrc) {
+        this.setData({ _currentSrc: fallbackSrc });
+      } else {
+        this.setData({ _imgError: true });
+      }
+    },
+
+    _setGroupContext(ctx) {
+      this.setData({
+        _groupSize: ctx.size || '',
+        _groupRound: !!ctx.round,
+        _groupOverlap: !!ctx.overlap,
+      });
+    },
+  },
+});

package/miniprogram_dist/components/avatar/avatar.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "styleIsolation": "apply-shared"
+}

package/miniprogram_dist/components/avatar/avatar.scss

@@ -0,0 +1,68 @@
+.w-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--size-avatar-md);
+  height: var(--size-avatar-md);
+  border-radius: var(--w-avatar-radius);
+  background-color: var(--w-avatar-bg);
+  overflow: hidden;
+  flex-shrink: 0;
+  position: relative;
+  box-sizing: border-box;
+  font-size: var(--font-size-md);
+  font-weight: 500;
+  color: var(--color-text-primary);
+}
+
+/* Sizes */
+.w-avatar--small {
+  width: var(--size-avatar-sm);
+  height: var(--size-avatar-sm);
+  font-size: var(--font-size-sm);
+}
+
+.w-avatar--medium {
+  width: var(--size-avatar-md);
+  height: var(--size-avatar-md);
+  font-size: var(--font-size-md);
+}
+
+.w-avatar--large {
+  width: var(--size-avatar-lg);
+  height: var(--size-avatar-lg);
+  font-size: var(--font-size-lg);
+}
+
+/* Round */
+.w-avatar--round {
+  border-radius: 50%;
+}
+
+/* Bordered — white ring, useful when overlapping */
+.w-avatar--bordered {
+  border: 4rpx solid var(--color-bg-elevated);
+}
+
+/* Group overlap */
+.w-avatar--group-overlap {
+  margin-left: -20rpx;
+}
+
+/* Image */
+.w-avatar__img {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+/* Text / icon content */
+.w-avatar__content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  line-height: 1;
+  white-space: nowrap;
+}

package/miniprogram_dist/components/avatar/avatar.wxml

@@ -0,0 +1,15 @@
+<view
+  class="w-avatar w-avatar--{{_groupSize || size}} {{(round || _groupRound) ? 'w-avatar--round' : ''}} {{bordered ? 'w-avatar--bordered' : ''}} {{_groupOverlap ? 'w-avatar--group-overlap' : ''}}"
+  style="{{color ? 'background-color: ' + color + ';' : ''}}"
+>
+  <image
+    wx:if="{{_currentSrc && !_imgError}}"
+    class="w-avatar__img"
+    src="{{_currentSrc}}"
+    mode="aspectFill"
+    binderror="handleImgError"
+  ></image>
+  <view wx:else class="w-avatar__content">
+    <slot></slot>
+  </view>
+</view>

package/miniprogram_dist/components/avatar-group/avatar-group.js

@@ -0,0 +1,45 @@
+Component({
+  relations: {
+    '../avatar/avatar': {
+      type: 'descendant',
+      linked() {
+        this._syncChildren();
+      },
+      unlinked() {
+        this._syncChildren();
+      },
+    },
+  },
+
+  properties: {
+    size: {
+      type: String,
+      value: '', // 统一覆盖子头像尺寸，空则各自保留
+    },
+    round: {
+      type: Boolean,
+      value: false,
+    },
+  },
+
+  observers: {
+    'size, round'() {
+      this._syncChildren();
+    },
+  },
+
+  methods: {
+    _syncChildren() {
+      const children = this.getRelationNodes('../avatar/avatar');
+      const size = this.data.size;
+      const round = this.data.round;
+      children.forEach((child, index) => {
+        child._setGroupContext({
+          size,
+          round,
+          overlap: index > 0,
+        });
+      });
+    },
+  },
+});

package/miniprogram_dist/components/avatar-group/avatar-group.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "styleIsolation": "apply-shared",
+  "usingComponents": {
+    "w-avatar": "/src/components/avatar/avatar"
+  }
+}

package/miniprogram_dist/components/avatar-group/avatar-group.scss

@@ -0,0 +1,4 @@
+.w-avatar-group {
+  display: inline-flex;
+  align-items: center;
+}

package/miniprogram_dist/components/avatar-group/avatar-group.wxml

@@ -0,0 +1,3 @@
+<view class="w-avatar-group">
+  <slot></slot>
+</view>

package/miniprogram_dist/components/back-top/back-top.js

@@ -0,0 +1,68 @@
+Component({
+  properties: {
+    scrollTop: {
+      type: Number,
+      value: 0,
+    },
+    visibilityHeight: {
+      type: Number,
+      value: 180,
+    },
+    right: {
+      type: Number,
+      value: 48,
+    },
+    bottom: {
+      type: Number,
+      value: 96,
+    },
+    duration: {
+      type: Number,
+      value: 300,
+    },
+  },
+
+  data: {
+    _visible: false,
+    _style: '',
+  },
+
+  lifetimes: {
+    ready() {
+      this._computeStyle();
+    },
+  },
+
+  observers: {
+    'right, bottom'() {
+      this._computeStyle();
+    },
+    scrollTop(val) {
+      const visible = val >= this.data.visibilityHeight;
+      if (visible !== this.data._visible) {
+        this.setData({ _visible: visible });
+      }
+    },
+  },
+
+  methods: {
+    _computeStyle() {
+      const { right, bottom } = this.data;
+      const parts = [
+        'position: fixed',
+        'z-index: 999',
+        `right: ${right}rpx`,
+        `bottom: ${bottom}rpx`,
+      ];
+      this.setData({ _style: parts.join('; ') });
+    },
+
+    handleTap() {
+      wx.pageScrollTo({
+        scrollTop: 0,
+        duration: this.data.duration,
+      });
+      this.triggerEvent('click');
+    },
+  },
+});

package/miniprogram_dist/components/back-top/back-top.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "styleIsolation": "apply-shared"
+}

package/miniprogram_dist/components/back-top/back-top.scss

@@ -0,0 +1,43 @@
+@import '../../styles/iconfont.scss';
+
+.w-back-top {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 50%;
+  background: var(--color-bg-elevated);
+  box-shadow: var(--shadow-float);
+  position: relative;
+  overflow: hidden;
+  animation: w-back-top-fade-in 0.2s ease-out;
+}
+
+.w-back-top__icon {
+  font-size: 36rpx;
+  color: var(--color-text-primary);
+}
+
+/* Press overlay */
+.w-back-top--active::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--color-press-overlay-light);
+  border-radius: inherit;
+}
+
+@keyframes w-back-top-fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

package/miniprogram_dist/components/back-top/back-top.wxml

@@ -0,0 +1,10 @@
+<view
+  wx:if="{{_visible}}"
+  class="w-back-top"
+  style="{{_style}}"
+  hover-class="w-back-top--active"
+  hover-stay-time="70"
+  bindtap="handleTap"
+>
+  <text class="iconfont icon-top w-back-top__icon"></text>
+</view>

package/miniprogram_dist/components/badge/badge.js

@@ -0,0 +1,100 @@
+Component({
+  properties: {
+    value: {
+      type: null,
+      value: '',
+    },
+    max: {
+      type: Number,
+      value: 0,
+    },
+    dot: {
+      type: Boolean,
+      value: false,
+    },
+    type: {
+      type: String,
+      value: 'default',
+    },
+    show: {
+      type: Boolean,
+      value: true,
+    },
+    showZero: {
+      type: Boolean,
+      value: false,
+    },
+    processing: {
+      type: Boolean,
+      value: false,
+    },
+    color: {
+      type: String,
+      value: '',
+    },
+    offsetX: {
+      type: Number,
+      value: 0,
+    },
+    offsetY: {
+      type: Number,
+      value: 0,
+    },
+  },
+
+  data: {
+    _visible: false,
+    _displayValue: '',
+    _style: '',
+  },
+
+  observers: {
+    'value, max, dot, show, showZero, color, offsetX, offsetY': function (
+      value,
+      max,
+      dot,
+      show,
+      showZero,
+      color,
+      offsetX,
+      offsetY,
+    ) {
+      // Visibility
+      let visible = show;
+      if (visible && !dot) {
+        if (value === '' || value === null || value === undefined) {
+          visible = false;
+        } else if (!showZero && Number(value) === 0) {
+          visible = false;
+        }
+      }
+
+      // Display value
+      let displayValue = '';
+      if (!dot && visible) {
+        const numVal = Number(value);
+        if (max > 0 && !isNaN(numVal) && numVal > max) {
+          displayValue = `${max}+`;
+        } else {
+          displayValue = String(value);
+        }
+      }
+
+      // Style (custom color + offset)
+      const parts = [];
+      if (color) {
+        parts.push(`--_bg: ${color}`);
+        parts.push(`background-color: ${color}`);
+      }
+      if (offsetX || offsetY) {
+        parts.push(`transform: translate(calc(50% + ${offsetX}rpx), calc(-50% + ${offsetY}rpx))`);
+      }
+
+      this.setData({
+        _visible: visible,
+        _displayValue: displayValue,
+        _style: parts.join('; '),
+      });
+    },
+  },
+});

package/miniprogram_dist/components/badge/badge.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "styleIsolation": "apply-shared"
+}