wedux-ui 0.1.0

package/miniprogram_dist/components/select/select.scss

@@ -0,0 +1,235 @@
+@import '../../styles/iconfont.scss';
+
+/* Trigger */
+.w-select__trigger {
+  display: flex;
+  align-items: center;
+  min-height: var(--size-input-height);
+  padding: 0 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;
+  gap: var(--spacing-xs);
+}
+
+.w-select--has-tags {
+  flex-wrap: wrap;
+  padding: var(--spacing-xs) var(--spacing-md) var(--spacing-xs) var(--spacing-xs);
+}
+
+.w-select--size-medium .w-select__trigger,
+.w-select--size-medium.w-select__trigger {
+  min-height: var(--size-input-height-md);
+}
+
+.w-select--size-small .w-select__trigger,
+.w-select--size-small.w-select__trigger {
+  min-height: var(--size-input-height-sm);
+  padding: 0 var(--spacing-sm);
+  font-size: var(--font-size-sm);
+}
+
+.w-select--disabled {
+  background: var(--color-input-bg-disabled);
+  opacity: 0.6;
+}
+
+.w-select--error {
+  border-color: var(--color-input-border-error);
+}
+
+.w-select--warning {
+  border-color: var(--color-input-border-warning);
+}
+
+.w-select__text {
+  flex: 1;
+  min-width: 0;
+  color: var(--color-text-primary);
+  font-size: inherit;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.w-select__placeholder {
+  flex: 1;
+  min-width: 0;
+  color: var(--color-text-placeholder);
+  font-size: inherit;
+}
+
+.w-select__icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+
+.w-select__arrow-icon {
+  font-size: 28rpx;
+  color: var(--color-text-secondary);
+  line-height: 1;
+}
+
+.w-select__clear {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36rpx;
+  height: 36rpx;
+  flex-shrink: 0;
+}
+
+.w-select__clear-icon {
+  width: 28rpx;
+  height: 28rpx;
+  border-radius: 50%;
+  background: var(--color-text-placeholder);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16rpx;
+  color: var(--color-bg-elevated);
+  line-height: 1;
+}
+
+/* Tags */
+.w-select__tags {
+  display: flex;
+  flex-wrap: wrap;
+  flex: 1;
+  min-width: 0;
+  gap: var(--spacing-xs);
+}
+
+.w-select__tag {
+  display: inline-flex;
+  align-items: center;
+  height: var(--size-tag-height-sm);
+  padding: 0 var(--spacing-sm);
+  background: var(--color-bg-base);
+  border-radius: var(--radius-sm);
+  font-size: 22rpx;
+  color: var(--color-text-primary);
+  gap: 4rpx;
+  max-width: 240rpx;
+}
+
+.w-select__tag-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.w-select__tag-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 24rpx;
+  height: 24rpx;
+}
+
+.w-select__tag-close-icon {
+  width: 20rpx;
+  height: 20rpx;
+  border-radius: 50%;
+  background: var(--color-text-placeholder);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12rpx;
+  color: var(--color-bg-elevated);
+  line-height: 1;
+}
+
+/* Panel */
+.w-select__panel {
+  background: var(--color-bg-elevated);
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.w-select__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-md) var(--spacing-lg);
+  border-bottom: 1rpx solid var(--color-separator);
+}
+
+.w-select__btn {
+  font-size: var(--font-size-md);
+  color: var(--color-text-secondary);
+  min-width: 80rpx;
+}
+
+.w-select__btn--primary {
+  color: var(--color-brand);
+  font-weight: 500;
+  text-align: right;
+}
+
+.w-select__title {
+  font-size: var(--font-size-lg);
+  font-weight: 500;
+  color: var(--color-text-primary);
+}
+
+/* Picker (single) */
+.w-select__picker {
+  width: 100%;
+  height: 528rpx;
+}
+
+.w-select__indicator {
+  height: 88rpx;
+}
+
+.w-select__item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 88rpx;
+  font-size: var(--font-size-xl);
+  color: var(--color-text-primary);
+}
+
+/* List (multiple) */
+.w-select__list {
+  max-height: 528rpx;
+}
+
+.w-select__option {
+  display: flex;
+  align-items: center;
+  padding: var(--spacing-md) var(--spacing-lg);
+  gap: var(--spacing-md);
+}
+
+.w-select__option--active {
+  background: var(--color-press-overlay-light);
+}
+
+.w-select__dot {
+  width: 36rpx;
+  height: 36rpx;
+  border-radius: 50%;
+  border: 2rpx solid var(--color-text-placeholder);
+  box-sizing: border-box;
+  flex-shrink: 0;
+  transition:
+    background 0.2s,
+    border-color 0.2s;
+}
+
+.w-select__dot--selected {
+  background: var(--color-brand);
+  border-color: var(--color-brand);
+}
+
+.w-select__option-label {
+  font-size: var(--font-size-lg);
+  color: var(--color-text-primary);
+}

package/miniprogram_dist/components/select/select.wxml

@@ -0,0 +1,79 @@
+<view class="w-select">
+  <view
+    class="w-select__trigger w-select--size-{{size || _formItemSize || 'medium'}} {{(disabled || _formItemDisabled) ? 'w-select--disabled' : ''}} {{readonly ? 'w-select--readonly' : ''}} {{status === 'error' ? 'w-select--error' : ''}} {{status === 'warning' ? 'w-select--warning' : ''}} {{multiple && _selectedTags.length ? 'w-select--has-tags' : ''}}"
+    bindtap="handleTap"
+  >
+    <!-- 多选：标签展示 -->
+    <view wx:if="{{multiple && _selectedTags.length}}" class="w-select__tags">
+      <view wx:for="{{_selectedTags}}" wx:key="value" class="w-select__tag">
+        <text class="w-select__tag-text">{{item.label}}</text>
+        <view
+          wx:if="{{!disabled && !_formItemDisabled && !readonly}}"
+          class="w-select__tag-close"
+          catchtap="handleTagRemove"
+          data-value="{{item.value}}"
+        >
+          <text class="w-select__tag-close-icon iconfont icon-close"></text>
+        </view>
+      </view>
+    </view>
+    <!-- 多选：占位符 -->
+    <text wx:elif="{{multiple}}" class="w-select__placeholder">{{placeholder}}</text>
+    <!-- 单选：文本展示 -->
+    <text wx:elif="{{_displayText}}" class="w-select__text">{{_displayText}}</text>
+    <text wx:else class="w-select__placeholder">{{placeholder}}</text>
+
+    <view
+      wx:if="{{clearable && (multiple ? _selectedTags.length : _displayText) && !disabled && !_formItemDisabled && !readonly}}"
+      class="w-select__clear"
+      catchtap="handleTriggerClear"
+    >
+      <text class="w-select__clear-icon iconfont icon-close"></text>
+    </view>
+    <view wx:else class="w-select__icon">
+      <text class="w-select__arrow-icon iconfont icon-down"></text>
+    </view>
+  </view>
+
+  <w-drawer show="{{_visible}}" placement="bottom" round bind:update:show="handleCancel">
+    <view class="w-select__panel">
+      <view class="w-select__header">
+        <view wx:if="{{clearable}}" class="w-select__btn" bindtap="handleClear">清除</view>
+        <view wx:else class="w-select__btn" bindtap="handleCancel">取消</view>
+        <view class="w-select__title">{{title || '请选择'}}</view>
+        <view class="w-select__btn w-select__btn--primary" bindtap="handleConfirm">确定</view>
+      </view>
+
+      <!-- 单选：滚轮 -->
+      <picker-view
+        wx:if="{{!multiple}}"
+        class="w-select__picker"
+        value="{{_pickerValue}}"
+        indicator-class="w-select__indicator"
+        bindchange="handlePickerChange"
+      >
+        <picker-view-column>
+          <view wx:for="{{options}}" wx:key="value" class="w-select__item">{{item.label}}</view>
+        </picker-view-column>
+      </picker-view>
+
+      <!-- 多选：勾选列表 -->
+      <scroll-view wx:else class="w-select__list" scroll-y>
+        <view
+          wx:for="{{options}}"
+          wx:key="value"
+          class="w-select__option"
+          hover-class="w-select__option--active"
+          hover-stay-time="70"
+          bindtap="handleOptionTap"
+          data-value="{{item.value}}"
+        >
+          <view
+            class="w-select__dot {{_selectedMap[item.value] ? 'w-select__dot--selected' : ''}}"
+          ></view>
+          <text class="w-select__option-label">{{item.label}}</text>
+        </view>
+      </scroll-view>
+    </view>
+  </w-drawer>
+</view>

package/miniprogram_dist/components/stepper/stepper.js

@@ -0,0 +1,113 @@
+const formField = require('../../behaviors/formField');
+
+Component({
+  behaviors: ['wx://form-field', formField],
+
+  relations: {
+    '../form-item/form-item': {
+      type: 'ancestor',
+    },
+  },
+
+  properties: {
+    value: { type: Number, value: 0 },
+    min: { type: Number, value: 0 },
+    max: { type: Number, value: Infinity },
+    step: { type: Number, value: 1 },
+    size: { type: String, value: '' },
+    disabled: { type: Boolean, value: false },
+    decimalLength: { type: Number, value: 0 },
+  },
+
+  data: {
+    _displayValue: '0',
+    _minusDisabled: false,
+    _plusDisabled: false,
+    _disabled: false,
+  },
+
+  observers: {
+    'value, min, max, decimalLength': function (value, min, max, decimalLength) {
+      const clamped = Math.min(Math.max(value, min), max);
+      this.setData({
+        _displayValue: decimalLength > 0 ? clamped.toFixed(decimalLength) : String(clamped),
+        _minusDisabled: clamped <= min,
+        _plusDisabled: clamped >= max,
+      });
+    },
+    'disabled, _formItemDisabled': function (disabled, formDisabled) {
+      this.setData({ _disabled: disabled || formDisabled });
+    },
+  },
+
+  methods: {
+    _add(offset) {
+      if (this._isDisabled()) return;
+      const { value, min, max, step, decimalLength } = this.data;
+      const factor = Math.pow(10, decimalLength);
+      const newVal = Math.round(value * factor + offset * step * factor) / factor;
+      const clamped = Math.min(Math.max(newVal, min), max);
+      if (clamped !== value) {
+        this.triggerEvent('update:value', { value: clamped });
+        this._notifyChange();
+      }
+    },
+
+    handleMinus() {
+      if (this.data._minusDisabled || this._isDisabled()) {
+        this.triggerEvent('overlimit', { type: 'minus' });
+        return;
+      }
+      this._add(-1);
+    },
+
+    handlePlus() {
+      if (this.data._plusDisabled || this._isDisabled()) {
+        this.triggerEvent('overlimit', { type: 'plus' });
+        return;
+      }
+      this._add(1);
+    },
+
+    _startLongPress(type) {
+      this._longPressTimer = setTimeout(() => {
+        this._longPressInterval = setInterval(() => {
+          if (type === 'minus') {
+            this.handleMinus();
+          } else {
+            this.handlePlus();
+          }
+        }, 100);
+      }, 350);
+    },
+
+    _stopLongPress() {
+      clearTimeout(this._longPressTimer);
+      clearInterval(this._longPressInterval);
+      this._longPressTimer = null;
+      this._longPressInterval = null;
+    },
+
+    onMinusTouchStart() {
+      this.handleMinus();
+      if (!this.data._minusDisabled && !this._isDisabled()) {
+        this._startLongPress('minus');
+      }
+    },
+
+    onPlusTouchStart() {
+      this.handlePlus();
+      if (!this.data._plusDisabled && !this._isDisabled()) {
+        this._startLongPress('plus');
+      }
+    },
+
+    onTouchEnd() {
+      this._stopLongPress();
+    },
+  },
+
+  detached() {
+    this._stopLongPress();
+  },
+});

package/miniprogram_dist/components/stepper/stepper.json

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

package/miniprogram_dist/components/stepper/stepper.scss

@@ -0,0 +1,73 @@
+@import '../../styles/iconfont.scss';
+
+.w-stepper {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+}
+
+.w-stepper__minus,
+.w-stepper__plus {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--w-stepper-btn-width);
+  height: var(--w-stepper-height);
+  background: var(--w-stepper-bg);
+  font-size: var(--w-stepper-font-size);
+  color: var(--w-stepper-text);
+  transition: opacity 0.2s;
+
+  &:active {
+    opacity: 0.6;
+  }
+}
+
+.w-stepper__minus {
+  border-radius: var(--w-stepper-radius) 0 0 var(--w-stepper-radius);
+}
+
+.w-stepper__plus {
+  border-radius: 0 var(--w-stepper-radius) var(--w-stepper-radius) 0;
+}
+
+.w-stepper__minus--disabled,
+.w-stepper__plus--disabled {
+  opacity: 0.3;
+
+  &:active {
+    opacity: 0.3;
+  }
+}
+
+.w-stepper__input {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--w-stepper-input-width);
+  height: var(--w-stepper-height);
+  background: var(--w-stepper-bg);
+  font-size: var(--w-stepper-font-size);
+  color: var(--w-stepper-text);
+  margin: 0 2rpx;
+}
+
+/* Small size */
+.w-stepper--size-small .w-stepper__minus,
+.w-stepper--size-small .w-stepper__plus {
+  width: var(--w-stepper-btn-width-sm);
+  height: var(--w-stepper-height-sm);
+  font-size: var(--w-stepper-font-size-sm);
+}
+
+.w-stepper--size-small .w-stepper__input {
+  width: var(--w-stepper-input-width-sm);
+  height: var(--w-stepper-height-sm);
+  font-size: var(--w-stepper-font-size-sm);
+}
+
+/* Disabled */
+.w-stepper--disabled {
+  opacity: 0.4;
+  pointer-events: none;
+}

package/miniprogram_dist/components/stepper/stepper.wxml

@@ -0,0 +1,23 @@
+<view
+  class="w-stepper w-stepper--size-{{size || _formItemSize || 'medium'}} {{_disabled ? 'w-stepper--disabled' : ''}}"
+>
+  <view
+    class="w-stepper__minus {{(_minusDisabled || _disabled) ? 'w-stepper__minus--disabled' : ''}}"
+    bindtouchstart="onMinusTouchStart"
+    bindtouchend="onTouchEnd"
+    bindtouchcancel="onTouchEnd"
+  >
+    <view class="iconfont icon-minus"></view>
+  </view>
+  <view class="w-stepper__input">
+    <text>{{_displayValue}}</text>
+  </view>
+  <view
+    class="w-stepper__plus {{(_plusDisabled || _disabled) ? 'w-stepper__plus--disabled' : ''}}"
+    bindtouchstart="onPlusTouchStart"
+    bindtouchend="onTouchEnd"
+    bindtouchcancel="onTouchEnd"
+  >
+    <view class="iconfont icon-plus"></view>
+  </view>
+</view>

package/miniprogram_dist/components/switch/switch.js

@@ -0,0 +1,42 @@
+const formField = require('../../behaviors/formField');
+
+Component({
+  behaviors: ['wx://form-field', formField],
+
+  relations: {
+    '../form-item/form-item': {
+      type: 'ancestor',
+    },
+  },
+
+  properties: {
+    checked: { type: Boolean, value: false },
+    disabled: { type: Boolean, value: false },
+    size: { type: String, value: '' },
+    checkedColor: { type: String, value: '' },
+    checkedText: { type: String, value: '' },
+    uncheckedText: { type: String, value: '' },
+  },
+
+  data: {
+    _trackStyle: '',
+  },
+
+  observers: {
+    'checked, checkedColor'(checked, checkedColor) {
+      let style = '';
+      if (checked && checkedColor) {
+        style = `background-color: ${checkedColor};`;
+      }
+      this.setData({ _trackStyle: style });
+    },
+  },
+
+  methods: {
+    handleTap() {
+      if (this._isDisabled()) return;
+      this.triggerEvent('update:checked', { checked: !this.data.checked });
+      this._notifyChange();
+    },
+  },
+});

package/miniprogram_dist/components/switch/switch.json

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

package/miniprogram_dist/components/switch/switch.scss

@@ -0,0 +1,77 @@
+.w-switch {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+}
+
+.w-switch__track {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: var(--w-switch-width);
+  height: var(--w-switch-height);
+  border-radius: calc(var(--w-switch-height) / 2);
+  background: var(--w-switch-bg);
+  transition: background-color 0.2s;
+  box-sizing: border-box;
+  padding: 0 8rpx;
+}
+
+.w-switch--size-small .w-switch__track {
+  width: var(--w-switch-width-sm);
+  height: var(--w-switch-height-sm);
+  padding: 0 6rpx;
+}
+
+.w-switch__thumb {
+  position: absolute;
+  top: 4rpx;
+  left: 4rpx;
+  width: calc(var(--w-switch-height) - 8rpx);
+  height: calc(var(--w-switch-height) - 8rpx);
+  border-radius: 50%;
+  background: #ffffff;
+  transition: transform 0.2s;
+  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
+}
+
+.w-switch--size-small .w-switch__thumb {
+  width: calc(var(--w-switch-height-sm) - 8rpx);
+  height: calc(var(--w-switch-height-sm) - 8rpx);
+}
+
+.w-switch--checked .w-switch__track {
+  background: var(--w-switch-checked-bg);
+}
+
+.w-switch--checked .w-switch__thumb {
+  transform: translateX(calc(var(--w-switch-width) - var(--w-switch-height)));
+}
+
+.w-switch--size-small.w-switch--checked .w-switch__thumb {
+  transform: translateX(calc(var(--w-switch-width-sm) - var(--w-switch-height-sm)));
+}
+
+.w-switch--disabled {
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+.w-switch__text {
+  font-size: 20rpx;
+  color: #ffffff;
+  position: relative;
+  z-index: 1;
+  white-space: nowrap;
+}
+
+.w-switch--checked .w-switch__text {
+  margin-right: auto;
+  margin-left: 4rpx;
+}
+
+.w-switch:not(.w-switch--checked) .w-switch__text {
+  margin-left: auto;
+  margin-right: 4rpx;
+  color: var(--color-text-secondary);
+}

package/miniprogram_dist/components/switch/switch.wxml

@@ -0,0 +1,10 @@
+<view
+  class="w-switch w-switch--size-{{size || _formItemSize || 'medium'}} {{checked ? 'w-switch--checked' : ''}} {{(disabled || _formItemDisabled) ? 'w-switch--disabled' : ''}}"
+  bindtap="handleTap"
+>
+  <view class="w-switch__track" style="{{_trackStyle}}">
+    <view class="w-switch__text" wx:if="{{checked && checkedText}}">{{checkedText}}</view>
+    <view class="w-switch__text" wx:elif="{{!checked && uncheckedText}}">{{uncheckedText}}</view>
+    <view class="w-switch__thumb"></view>
+  </view>
+</view>