wedux-ui 0.1.0

package/miniprogram_dist/components/tab-bar/tab-bar.js

@@ -0,0 +1,53 @@
+Component({
+  properties: {
+    active: {
+      type: String,
+      value: '',
+    },
+    items: {
+      type: Array,
+      value: [],
+    },
+    activeColor: {
+      type: String,
+      value: '',
+    },
+    color: {
+      type: String,
+      value: '',
+    },
+  },
+
+  data: {
+    _style: '',
+  },
+
+  observers: {
+    'activeColor, color': function (activeColor, color) {
+      let style = '';
+      if (activeColor) {
+        style += `--tab-bar-active-bg: ${activeColor};`;
+      }
+      if (color) {
+        style += `--tab-bar-color: ${color};`;
+      }
+      this.setData({ _style: style });
+    },
+  },
+
+  methods: {
+    onTabTap(e) {
+      const { key } = e.currentTarget.dataset;
+      if (key === this.data.active) return;
+
+      const item = this.data.items.find((i) => i.key === key);
+      if (!item) return;
+
+      if (item.url) {
+        wx.redirectTo({ url: item.url });
+      }
+
+      this.triggerEvent('change', { key, item });
+    },
+  },
+});

package/miniprogram_dist/components/tab-bar/tab-bar.json

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

package/miniprogram_dist/components/tab-bar/tab-bar.scss

@@ -0,0 +1,53 @@
+@import '../../styles/iconfont.scss';
+
+.w-tab-bar {
+  position: fixed;
+  bottom: env(safe-area-inset-bottom);
+  left: var(--tab-bar-margin);
+  right: var(--tab-bar-margin);
+  padding: var(--spacing-xs) var(--spacing-xs) calc(var(--spacing-xs));
+  background: var(--tab-bar-bg);
+  border-radius: var(--tab-bar-radius);
+  box-shadow: var(--tab-bar-shadow);
+  z-index: var(--tab-bar-z-index);
+  display: flex;
+  align-items: center;
+  box-sizing: content-box;
+  margin-bottom: var(--spacing-sm);
+}
+
+.w-tab-bar__item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4rpx;
+  padding: var(--spacing-sm) 0;
+  color: var(--tab-bar-color);
+  border-radius: var(--tab-bar-radius);
+}
+
+.w-tab-bar__icon {
+  font-size: var(--tab-bar-icon-size);
+  transition: color 0.2s;
+}
+
+.w-tab-bar__label {
+  font-size: var(--tab-bar-label-size);
+  line-height: 1.2;
+  transition: color 0.2s;
+}
+
+/* Active state */
+.w-tab-bar__item--active {
+  background-color: var(--tab-bar-active-bg);
+
+  .w-tab-bar__icon {
+    color: var(--tab-bar-active-color);
+  }
+
+  .w-tab-bar__label {
+    color: var(--tab-bar-active-color);
+  }
+}

package/miniprogram_dist/components/tab-bar/tab-bar.wxml

@@ -0,0 +1,12 @@
+<view class="w-tab-bar" style="{{_style}}">
+  <view
+    wx:for="{{items}}"
+    wx:key="key"
+    class="w-tab-bar__item {{item.key === active ? 'w-tab-bar__item--active' : ''}}"
+    data-key="{{item.key}}"
+    bindtap="onTabTap"
+  >
+    <view wx:if="{{item.icon}}" class="iconfont icon-{{item.icon}} w-tab-bar__icon"></view>
+    <text class="w-tab-bar__label">{{item.label}}</text>
+  </view>
+</view>

package/miniprogram_dist/components/tag/tag.js

@@ -0,0 +1,87 @@
+Component({
+  properties: {
+    type: {
+      type: String,
+      value: 'default', // 'default' | 'primary' | 'success' | 'info' | 'warning' | 'error'
+    },
+    size: {
+      type: String,
+      value: 'medium', // small | medium | large
+    },
+    closable: {
+      type: Boolean,
+      value: false,
+    },
+    disabled: {
+      type: Boolean,
+      value: false,
+    },
+    checkable: {
+      type: Boolean,
+      value: false,
+    },
+    checked: {
+      type: Boolean,
+      value: false,
+    },
+    round: {
+      type: Boolean,
+      value: false,
+    },
+    bordered: {
+      type: Boolean,
+      value: true,
+    },
+    strong: {
+      type: Boolean,
+      value: false,
+    },
+    color: {
+      type: String,
+      value: '',
+    },
+    textColor: {
+      type: String,
+      value: '',
+    },
+    borderColor: {
+      type: String,
+      value: '',
+    },
+  },
+
+  data: {
+    _style: '',
+  },
+
+  observers: {
+    'color, textColor, borderColor'(color, textColor, borderColor) {
+      const parts = [];
+      if (color) {
+        parts.push(`background-color: ${color}`);
+      }
+      if (textColor) {
+        parts.push(`color: ${textColor}`);
+      }
+      if (borderColor) {
+        parts.push(`border-color: ${borderColor}`);
+      }
+      this.setData({ _style: parts.join('; ') });
+    },
+  },
+
+  methods: {
+    handleTap() {
+      if (this.data.disabled) return;
+      if (this.data.checkable) {
+        this.triggerEvent('update:checked', { checked: !this.data.checked });
+      }
+      this.triggerEvent('tap');
+    },
+
+    handleClose(e) {
+      if (this.data.disabled) return;
+      this.triggerEvent('close');
+    },
+  },
+});

package/miniprogram_dist/components/tag/tag.json

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

package/miniprogram_dist/components/tag/tag.scss

@@ -0,0 +1,138 @@
+@import '../../styles/iconfont.scss';
+
+.w-tag {
+  display: inline-flex;
+  align-items: center;
+  height: var(--w-tag-height-md);
+  padding: 0 var(--spacing-sm);
+  border-radius: var(--w-tag-radius);
+  font-size: var(--w-tag-font-size);
+  font-weight: 400;
+  box-sizing: border-box;
+  white-space: nowrap;
+  border: 2rpx solid transparent;
+  transition: opacity 0.2s;
+  line-height: 1;
+}
+
+/* ——— Sizes ——— */
+
+.w-tag--size-small {
+  height: var(--w-tag-height-sm);
+  padding: 0 var(--spacing-xs);
+  font-size: 22rpx;
+}
+
+.w-tag--size-medium {
+  height: var(--w-tag-height-md);
+  padding: 0 var(--spacing-sm);
+  font-size: var(--w-tag-font-size);
+}
+
+.w-tag--size-large {
+  height: var(--w-tag-height-lg);
+  padding: 0 var(--spacing-md);
+  font-size: var(--font-size-md);
+}
+
+/* Round */
+.w-tag--round {
+  border-radius: 9999rpx;
+}
+
+/* Strong */
+.w-tag--strong {
+  font-weight: 600;
+}
+
+/* ——— Type colors (filled style) ——— */
+
+.w-tag--default {
+  background: var(--color-bg-base);
+  color: var(--color-text-primary);
+  border-color: var(--color-separator);
+}
+
+.w-tag--primary {
+  background: rgba(7, 193, 96, 0.1);
+  color: var(--color-brand);
+  border-color: rgba(7, 193, 96, 0.3);
+}
+
+.w-tag--success {
+  background: rgba(116, 182, 0, 0.1);
+  color: var(--color-success);
+  border-color: rgba(116, 182, 0, 0.3);
+}
+
+.w-tag--info {
+  background: rgba(16, 174, 255, 0.1);
+  color: var(--color-info);
+  border-color: rgba(16, 174, 255, 0.3);
+}
+
+.w-tag--warning {
+  background: rgba(250, 157, 59, 0.1);
+  color: var(--color-warning);
+  border-color: rgba(250, 157, 59, 0.3);
+}
+
+.w-tag--error {
+  background: rgba(250, 81, 81, 0.1);
+  color: var(--color-danger);
+  border-color: rgba(250, 81, 81, 0.3);
+}
+
+/* Borderless */
+.w-tag--borderless {
+  border-color: transparent;
+}
+
+/* ——— States ——— */
+
+.w-tag--disabled {
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+.w-tag--active {
+  opacity: 0.7;
+}
+
+/* ——— Checkable ——— */
+
+.w-tag--checked {
+  background: var(--color-brand);
+  color: #ffffff;
+  border-color: var(--color-brand);
+}
+
+.w-tag--unchecked {
+  background: transparent;
+  color: var(--color-text-secondary);
+  border-color: var(--color-separator);
+}
+
+.w-tag--unchecked.w-tag--borderless {
+  border-color: transparent;
+}
+
+/* ——— Close button ——— */
+
+.w-tag__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: var(--spacing-xs);
+  width: 28rpx;
+  height: 28rpx;
+  border-radius: 50%;
+  transition: background 0.2s;
+}
+
+.w-tag__close-icon {
+  font-size: 20rpx;
+  line-height: 1;
+  color: currentColor;
+  opacity: 0.6;
+}

package/miniprogram_dist/components/tag/tag.wxml

@@ -0,0 +1,12 @@
+<view
+  class="w-tag {{checkable ? '' : 'w-tag--' + type}} w-tag--size-{{size}} {{round ? 'w-tag--round' : ''}} {{bordered ? '' : 'w-tag--borderless'}} {{strong ? 'w-tag--strong' : ''}} {{disabled ? 'w-tag--disabled' : ''}} {{checkable ? 'w-tag--checkable' : ''}} {{checkable && checked ? 'w-tag--checked' : ''}} {{checkable && !checked ? 'w-tag--unchecked' : ''}}"
+  style="{{_style}}"
+  hover-class="{{disabled ? '' : 'w-tag--active'}}"
+  hover-stay-time="70"
+  bindtap="handleTap"
+>
+  <slot></slot>
+  <view wx:if="{{closable && !disabled}}" class="w-tag__close" catchtap="handleClose">
+    <text class="w-tag__close-icon iconfont icon-close"></text>
+  </view>
+</view>

package/miniprogram_dist/components/textarea/textarea.js

@@ -0,0 +1,46 @@
+const formField = require('../../behaviors/formField');
+
+Component({
+  behaviors: ['wx://form-field', formField],
+
+  relations: {
+    '../form-item/form-item': {
+      type: 'ancestor',
+    },
+  },
+
+  properties: {
+    value: { type: String, value: '' },
+    placeholder: { type: String, value: '' },
+    disabled: { type: Boolean, value: false },
+    maxlength: { type: Number, value: 140 },
+    showWordLimit: { type: Boolean, value: false },
+    autoHeight: { type: Boolean, value: false },
+    rows: { type: Number, value: 3 },
+    size: { type: String, value: '' },
+    status: { type: String, value: '' },
+  },
+
+  data: {
+    _focused: false,
+  },
+
+  methods: {
+    handleInput(e) {
+      const val = e.detail.value;
+      this.triggerEvent('update:value', { value: val });
+      this._notifyChange();
+    },
+
+    handleFocus(e) {
+      this.setData({ _focused: true });
+      this.triggerEvent('focus', e.detail);
+    },
+
+    handleBlur(e) {
+      this.setData({ _focused: false });
+      this.triggerEvent('blur', e.detail);
+      this._notifyBlur();
+    },
+  },
+});

package/miniprogram_dist/components/textarea/textarea.json

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

package/miniprogram_dist/components/textarea/textarea.scss

@@ -0,0 +1,51 @@
+.w-textarea {
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacing-sm) var(--spacing-md);
+  background: var(--color-input-bg);
+  border: 2rpx solid var(--color-input-border);
+  border-radius: var(--radius-md);
+  box-sizing: border-box;
+  transition: border-color 0.2s;
+}
+
+.w-textarea--size-small {
+  padding: var(--spacing-xs) var(--spacing-sm);
+  font-size: var(--font-size-sm);
+}
+
+.w-textarea--focus {
+  border-color: var(--color-input-border-focus);
+}
+
+.w-textarea--disabled {
+  background: var(--color-input-bg-disabled);
+  opacity: 0.6;
+}
+
+.w-textarea--error {
+  border-color: var(--color-input-border-error);
+}
+
+.w-textarea--warning {
+  border-color: var(--color-input-border-warning);
+}
+
+.w-textarea__native {
+  width: 100%;
+  font-size: inherit;
+  color: var(--color-text-primary);
+  background: transparent;
+  line-height: 1.5;
+}
+
+.w-textarea__placeholder {
+  color: var(--color-text-placeholder);
+}
+
+.w-textarea__count {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  text-align: right;
+  margin-top: var(--spacing-xs);
+}

package/miniprogram_dist/components/textarea/textarea.wxml

@@ -0,0 +1,20 @@
+<view
+  class="w-textarea w-textarea--size-{{size || _formItemSize || 'medium'}} {{(disabled || _formItemDisabled) ? 'w-textarea--disabled' : ''}} {{_focused ? 'w-textarea--focus' : ''}} {{status === 'error' ? 'w-textarea--error' : ''}} {{status === 'warning' ? 'w-textarea--warning' : ''}}"
+>
+  <textarea
+    class="w-textarea__native"
+    value="{{value}}"
+    placeholder="{{placeholder}}"
+    placeholder-class="w-textarea__placeholder"
+    disabled="{{disabled || _formItemDisabled}}"
+    maxlength="{{maxlength}}"
+    auto-height="{{autoHeight}}"
+    style="min-height: {{rows * 40}}rpx;"
+    bindinput="handleInput"
+    bindfocus="handleFocus"
+    bindblur="handleBlur"
+  />
+  <view wx:if="{{showWordLimit && maxlength > 0}}" class="w-textarea__count">
+    {{value.length}}/{{maxlength}}
+  </view>
+</view>

package/miniprogram_dist/components/theme-provider/presets.js

@@ -0,0 +1,101 @@
+export const light = {
+  // Brand & Semantic Colors
+  '--color-brand': '#07c160',
+  '--color-danger': '#fa5151',
+  '--color-info': '#10aeff',
+  '--color-warning': '#fa9d3b',
+  '--color-success': '#74b600',
+
+  // Background
+  '--color-bg-page': '#ededed',
+  '--color-bg-base': '#f7f7f7',
+  '--color-bg-elevated': '#ffffff',
+
+  // Text
+  '--color-text-primary': 'rgba(0, 0, 0, 0.9)',
+  '--color-text-secondary': 'rgba(0, 0, 0, 0.5)',
+  '--color-text-placeholder': 'rgba(0, 0, 0, 0.3)',
+  '--color-text-disabled': 'rgba(0, 0, 0, 0.1)',
+
+  // Separator & Overlay
+  '--color-separator': 'rgba(0, 0, 0, 0.1)',
+  '--color-press-overlay': 'rgba(0, 0, 0, 0.1)',
+  '--color-press-overlay-light': 'rgba(0, 0, 0, 0.06)',
+
+  // Shadows
+  '--shadow-float': '0 4rpx 20rpx rgba(0, 0, 0, 0.15)',
+  '--shadow-card-hover': '0 8rpx 32rpx rgba(0, 0, 0, 0.12)',
+
+  // Component-Level
+  '--w-input-bg': '#ffffff',
+  '--w-input-border': 'rgba(0, 0, 0, 0.1)',
+  '--w-input-border-focus': '#07c160',
+  '--w-switch-bg': 'rgba(0, 0, 0, 0.12)',
+  '--w-switch-checked-bg': '#07c160',
+  '--w-card-bg': '#ffffff',
+  '--w-card-border-color': 'rgba(0, 0, 0, 0.1)',
+  '--w-drawer-bg': '#ffffff',
+  '--w-drawer-mask-bg': 'rgba(0, 0, 0, 0.45)',
+  '--w-list-bg': '#ffffff',
+  '--w-list-border': 'rgba(0, 0, 0, 0.1)',
+  '--w-list-hover-bg': '#f7f7f7',
+  '--w-divider-color': 'rgba(0, 0, 0, 0.1)',
+  '--w-avatar-bg': 'rgba(0, 0, 0, 0.08)',
+};
+
+export const dark = {
+  // Brand & Semantic Colors
+  '--color-brand': '#74a800',
+  '--color-danger': '#cf4444',
+  '--color-info': '#0d8ccc',
+  '--color-warning': '#cc7d2e',
+  '--color-success': '#5e9200',
+
+  // Background
+  '--color-bg-page': '#111111',
+  '--color-bg-base': '#1a1a1a',
+  '--color-bg-elevated': '#2c2c2c',
+
+  // Text
+  '--color-text-primary': 'rgba(255, 255, 255, 0.9)',
+  '--color-text-secondary': 'rgba(255, 255, 255, 0.5)',
+  '--color-text-placeholder': 'rgba(255, 255, 255, 0.3)',
+  '--color-text-disabled': 'rgba(255, 255, 255, 0.1)',
+
+  // Separator & Overlay
+  '--color-separator': 'rgba(255, 255, 255, 0.1)',
+  '--color-press-overlay': 'rgba(255, 255, 255, 0.1)',
+  '--color-press-overlay-light': 'rgba(255, 255, 255, 0.06)',
+
+  // Shadows
+  '--shadow-float': '0 4rpx 20rpx rgba(0, 0, 0, 0.4)',
+  '--shadow-card-hover': '0 8rpx 32rpx rgba(0, 0, 0, 0.35)',
+
+  // Component-Level
+  '--w-input-bg': '#2c2c2c',
+  '--w-input-border': 'rgba(255, 255, 255, 0.15)',
+  '--w-input-border-focus': '#74a800',
+  '--w-switch-bg': 'rgba(255, 255, 255, 0.16)',
+  '--w-switch-checked-bg': '#74a800',
+  '--w-card-bg': '#2c2c2c',
+  '--w-card-border-color': 'rgba(255, 255, 255, 0.1)',
+  '--w-drawer-bg': '#2c2c2c',
+  '--w-drawer-mask-bg': 'rgba(0, 0, 0, 0.6)',
+  '--w-list-bg': '#2c2c2c',
+  '--w-list-border': 'rgba(255, 255, 255, 0.1)',
+  '--w-list-hover-bg': 'rgba(255, 255, 255, 0.06)',
+  '--w-divider-color': 'rgba(255, 255, 255, 0.1)',
+  '--w-avatar-bg': 'rgba(255, 255, 255, 0.12)',
+
+  // Component-specific dark overrides
+  '--color-avatar-bg': 'rgba(255, 255, 255, 0.12)',
+  '--color-switch-bg': 'rgba(255, 255, 255, 0.16)',
+  '--color-checkbox-check': '#ffffff',
+  '--color-rate-inactive': 'rgba(255, 255, 255, 0.16)',
+  '--color-upload-bg': 'rgba(255, 255, 255, 0.08)',
+  '--color-upload-mask': 'rgba(0, 0, 0, 0.7)',
+  '--color-upload-progress-track': 'rgba(255, 255, 255, 0.1)',
+  '--color-date-range-bg': 'rgba(116, 168, 0, 0.15)',
+  '--navbar-bg': '#000000',
+  '--tab-bar-active-bg': 'rgba(255, 255, 255, 0.15)',
+};

package/miniprogram_dist/components/theme-provider/theme-provider.js

@@ -0,0 +1,34 @@
+Component({
+  properties: {
+    theme: {
+      type: Object,
+      value: {},
+    },
+    themeOverrides: {
+      type: Object,
+      value: {},
+    },
+  },
+
+  observers: {
+    'theme, themeOverrides': function (theme, themeOverrides) {
+      const merged = Object.assign({}, theme || {}, themeOverrides || {});
+      const keys = Object.keys(merged);
+      if (!keys.length) {
+        this.setData({ themeStyle: '' });
+        return;
+      }
+      const themeStyle = keys
+        .map((k) => {
+          const key = k.startsWith('--') ? k : `--${k}`;
+          return `${key}: ${merged[k]}`;
+        })
+        .join('; ');
+      this.setData({ themeStyle });
+    },
+  },
+
+  data: {
+    themeStyle: '',
+  },
+});

package/miniprogram_dist/components/theme-provider/theme-provider.json

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

package/miniprogram_dist/components/theme-provider/theme-provider.scss

@@ -0,0 +1,3 @@
+.w-theme-provider {
+  display: block;
+}

package/miniprogram_dist/components/theme-provider/theme-provider.wxml

@@ -0,0 +1,3 @@
+<view class="w-theme-provider" style="{{themeStyle}}">
+  <slot></slot>
+</view>