wedux-ui 0.1.0

package/miniprogram_dist/components/radio-button/radio-button.scss

@@ -0,0 +1,39 @@
+.w-radio-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-md);
+  background: var(--color-bg-base);
+  color: var(--color-text-primary);
+  font-size: var(--font-size-md);
+  line-height: 1;
+  box-sizing: border-box;
+  transition:
+    background 0.2s,
+    color 0.2s;
+}
+
+.w-radio-button--size-medium {
+  height: var(--size-tag-height-lg);
+  padding: 0 var(--spacing-lg);
+}
+
+.w-radio-button--size-small {
+  height: var(--size-tag-height-md);
+  padding: 0 var(--spacing-md);
+  font-size: var(--font-size-sm);
+}
+
+.w-radio-button--checked {
+  background: var(--color-brand);
+  color: var(--color-text-anti);
+}
+
+.w-radio-button--round {
+  border-radius: var(--radius-full);
+}
+
+.w-radio-button--disabled {
+  opacity: 0.4;
+  pointer-events: none;
+}

package/miniprogram_dist/components/radio-button/radio-button.wxml

@@ -0,0 +1,8 @@
+<view
+  class="w-radio-button {{_checked ? 'w-radio-button--checked' : ''}} {{(disabled || _groupDisabled) ? 'w-radio-button--disabled' : ''}} w-radio-button--size-{{_groupSize || 'medium'}} {{round ? 'w-radio-button--round' : ''}}"
+  hover-class="none"
+  bindtap="handleTap"
+>
+  <text wx:if="{{label}}">{{label}}</text>
+  <slot wx:else></slot>
+</view>

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

@@ -0,0 +1,72 @@
+const formField = require('../../behaviors/formField');
+
+Component({
+  behaviors: ['wx://form-field', formField],
+
+  relations: {
+    '../form-item/form-item': {
+      type: 'ancestor',
+    },
+    '../radio/radio': {
+      type: 'descendant',
+      linked() {
+        this._updateChildren();
+      },
+      linkChanged() {
+        this._updateChildren();
+      },
+      unlinked() {
+        this._updateChildren();
+      },
+    },
+    '../radio-button/radio-button': {
+      type: 'descendant',
+      linked() {
+        this._updateChildren();
+      },
+      linkChanged() {
+        this._updateChildren();
+      },
+      unlinked() {
+        this._updateChildren();
+      },
+    },
+  },
+
+  properties: {
+    value: { type: null, value: null },
+    disabled: { type: Boolean, value: false },
+    size: { type: String, value: '' },
+    vertical: { type: Boolean, value: false },
+  },
+
+  data: {},
+
+  observers: {
+    'value, disabled, size, _formItemSize, _formItemDisabled'() {
+      this._updateChildren();
+    },
+  },
+
+  methods: {
+    _updateChildren() {
+      const radios = this.getRelationNodes('../radio/radio') || [];
+      const radioButtons = this.getRelationNodes('../radio-button/radio-button') || [];
+      const children = [...radios, ...radioButtons];
+      if (!children.length) return;
+      const ctx = {
+        size: this.data.size || this.data._formItemSize,
+        disabled: this.data.disabled || this.data._formItemDisabled,
+        currentValue: this.data.value,
+      };
+      children.forEach((child) => {
+        child._setGroupContext(ctx);
+      });
+    },
+
+    _handleChildChange(value) {
+      this.triggerEvent('update:value', { value });
+      this._notifyChange();
+    },
+  },
+});

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

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

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

@@ -0,0 +1,9 @@
+.w-radio-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-md);
+}
+
+.w-radio-group--vertical {
+  flex-direction: column;
+}

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

@@ -0,0 +1,3 @@
+<view class="w-radio-group {{vertical ? 'w-radio-group--vertical' : ''}}">
+  <slot></slot>
+</view>

package/miniprogram_dist/components/rate/rate.js

@@ -0,0 +1,90 @@
+const formField = require('../../behaviors/formField');
+
+Component({
+  behaviors: ['wx://form-field', formField],
+
+  relations: {
+    '../form-item/form-item': {
+      type: 'ancestor',
+    },
+  },
+
+  properties: {
+    value: { type: Number, value: 0 },
+    count: { type: Number, value: 5 },
+    allowHalf: { type: Boolean, value: false },
+    readonly: { type: Boolean, value: false },
+    disabled: { type: Boolean, value: false },
+    clearable: { type: Boolean, value: false },
+    size: { type: String, value: '' },
+    color: { type: String, value: '' },
+  },
+
+  data: {
+    _stars: [],
+    _activeStyle: '',
+  },
+
+  observers: {
+    'value, count, allowHalf'(value, count) {
+      const stars = [];
+      for (let i = 0; i < count; i++) {
+        const diff = value - i;
+        let state = 'inactive';
+        if (diff >= 1) {
+          state = 'full';
+        } else if (this.data.allowHalf && diff >= 0.5) {
+          state = 'half';
+        }
+        stars.push({ index: i, state });
+      }
+      this.setData({ _stars: stars });
+    },
+    color(color) {
+      this.setData({
+        _activeStyle: color ? `color: ${color};` : '',
+      });
+    },
+  },
+
+  methods: {
+    handleTap(e) {
+      if (this.data.readonly || this._isDisabled()) return;
+      const { index } = e.currentTarget.dataset;
+      const { allowHalf, clearable, value } = this.data;
+
+      let newValue;
+      if (allowHalf) {
+        // Use touch position to determine half or full
+        const query = this.createSelectorQuery();
+        query.select(`.w-rate__item-${index}`).boundingClientRect();
+        query.exec((res) => {
+          if (!res || !res[0]) return;
+          const rect = res[0];
+          const touch = e.detail || {};
+          const x = (touch.x || 0) - rect.left;
+          const isHalf = x < rect.width / 2;
+          newValue = isHalf ? index + 0.5 : index + 1;
+
+          if (clearable && newValue === value) {
+            this._doUpdate(null);
+          } else {
+            this._doUpdate(newValue);
+          }
+        });
+      } else {
+        newValue = index + 1;
+        if (clearable && newValue === value) {
+          this._doUpdate(null);
+        } else {
+          this._doUpdate(newValue);
+        }
+      }
+    },
+
+    _doUpdate(val) {
+      this.triggerEvent('update:value', { value: val });
+      this._notifyChange();
+    },
+  },
+});

package/miniprogram_dist/components/rate/rate.json

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

package/miniprogram_dist/components/rate/rate.scss

@@ -0,0 +1,59 @@
+.w-rate {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+
+.w-rate__item {
+  position: relative;
+  transition: transform 0.15s;
+  padding: 0 var(--spacing-rate-gap);
+}
+
+.w-rate__item--interactive:active {
+  transform: scale(0.9);
+}
+
+.w-rate__icon {
+  font-size: var(--size-rate);
+  line-height: 1;
+}
+
+.w-rate__icon--inactive {
+  color: var(--color-rate-inactive);
+}
+
+.w-rate__icon--active {
+  position: absolute;
+  top: 0;
+  left: var(--spacing-rate-gap);
+  overflow: hidden;
+  width: 0;
+  color: var(--color-rate-active);
+  pointer-events: none;
+}
+
+.w-rate__icon-inner {
+  white-space: nowrap;
+}
+
+/* Full star */
+.w-rate__item--active .w-rate__icon--active {
+  width: 100%;
+}
+
+/* Half star */
+.w-rate__item--half .w-rate__icon--active {
+  width: 50%;
+}
+
+/* Size: small */
+.w-rate--size-small .w-rate__icon {
+  font-size: var(--size-rate-sm);
+}
+
+/* Disabled */
+.w-rate--disabled {
+  opacity: 0.4;
+  pointer-events: none;
+}

package/miniprogram_dist/components/rate/rate.wxml

@@ -0,0 +1,16 @@
+<view
+  class="w-rate w-rate--size-{{size || _formItemSize || 'medium'}} {{(disabled || _formItemDisabled) ? 'w-rate--disabled' : ''}} {{readonly ? 'w-rate--readonly' : ''}}"
+>
+  <view
+    wx:for="{{_stars}}"
+    wx:key="index"
+    class="w-rate__item w-rate__item-{{item.index}} {{item.state === 'full' ? 'w-rate__item--active' : ''}} {{item.state === 'half' ? 'w-rate__item--half' : ''}} {{!(disabled || _formItemDisabled || readonly) ? 'w-rate__item--interactive' : ''}}"
+    data-index="{{item.index}}"
+    bindtap="handleTap"
+  >
+    <view class="w-rate__icon w-rate__icon--inactive">★</view>
+    <view class="w-rate__icon w-rate__icon--active" style="{{_activeStyle}}">
+      <view class="w-rate__icon-inner">★</view>
+    </view>
+  </view>
+</view>

package/miniprogram_dist/components/select/select.js

@@ -0,0 +1,201 @@
+const formField = require('../../behaviors/formField');
+
+Component({
+  behaviors: ['wx://form-field', formField],
+
+  relations: {
+    '../form-item/form-item': {
+      type: 'ancestor',
+    },
+  },
+
+  properties: {
+    value: { type: null, value: null },
+    options: { type: Array, value: [] },
+    multiple: { type: Boolean, value: false },
+    maxCount: { type: Number, value: 0 },
+    clearable: { type: Boolean, value: false },
+    disabled: { type: Boolean, value: false },
+    readonly: { type: Boolean, value: false },
+    placeholder: { type: String, value: '请选择' },
+    size: { type: String, value: '' },
+    status: { type: String, value: '' },
+    title: { type: String, value: '' },
+  },
+
+  data: {
+    _visible: false,
+    _displayText: '',
+    _pickerValue: [0],
+    // Multiple mode
+    _selectedValues: [],
+    _selectedMap: {},
+    _selectedTags: [],
+  },
+
+  lifetimes: {
+    attached() {
+      this._syncFromValue();
+    },
+  },
+
+  observers: {
+    'value, options'() {
+      this._syncFromValue();
+    },
+  },
+
+  methods: {
+    _findLabel(val) {
+      const { options } = this.data;
+      for (const opt of options) {
+        if (opt.value === val) return opt.label;
+      }
+      return String(val);
+    },
+
+    _findIndex(val) {
+      const { options } = this.data;
+      const idx = options.findIndex((opt) => opt.value === val);
+      return idx >= 0 ? idx : 0;
+    },
+
+    _syncFromValue() {
+      const { value, options, multiple } = this.data;
+      if (!options || options.length === 0) {
+        this.setData({
+          _displayText: '',
+          _pickerValue: [0],
+          _selectedValues: [],
+          _selectedMap: {},
+          _selectedTags: [],
+        });
+        return;
+      }
+
+      if (multiple) {
+        const arr = Array.isArray(value) ? value : [];
+        const tags = arr
+          .map((v) => {
+            const opt = options.find((o) => o.value === v);
+            return opt ? { label: opt.label, value: opt.value } : null;
+          })
+          .filter(Boolean);
+        const map = {};
+        arr.forEach((v) => {
+          map[v] = true;
+        });
+        this.setData({ _selectedValues: arr, _selectedMap: map, _selectedTags: tags });
+      } else {
+        if (value === null || value === undefined || value === '') {
+          this.setData({ _displayText: '', _pickerValue: [0] });
+        } else {
+          const label = this._findLabel(value);
+          const idx = this._findIndex(value);
+          this.setData({ _displayText: label, _pickerValue: [idx] });
+        }
+      }
+    },
+
+    handleTap() {
+      if (this._isDisabled() || this.data.readonly) return;
+
+      const { value, options, multiple } = this.data;
+
+      if (multiple) {
+        const arr = Array.isArray(value) ? [...value] : [];
+        const map = {};
+        arr.forEach((v) => {
+          map[v] = true;
+        });
+        this.setData({ _visible: true, _selectedValues: arr, _selectedMap: map });
+      } else {
+        const idx =
+          value !== null && value !== undefined && value !== '' ? this._findIndex(value) : 0;
+        this.setData({ _visible: true, _pickerValue: [idx] });
+      }
+
+      this.triggerEvent('open');
+    },
+
+    handlePickerChange(e) {
+      this.setData({ _pickerValue: e.detail.value });
+    },
+
+    handleOptionTap(e) {
+      const val = e.currentTarget.dataset.value;
+      const { _selectedValues, maxCount } = this.data;
+      const arr = [..._selectedValues];
+      const idx = arr.indexOf(val);
+
+      if (idx >= 0) {
+        arr.splice(idx, 1);
+      } else {
+        if (maxCount > 0 && arr.length >= maxCount) return;
+        arr.push(val);
+      }
+
+      const map = {};
+      arr.forEach((v) => {
+        map[v] = true;
+      });
+      this.setData({ _selectedValues: arr, _selectedMap: map });
+    },
+
+    handleConfirm() {
+      const { multiple, options, _pickerValue, _selectedValues } = this.data;
+
+      this.setData({ _visible: false });
+
+      if (multiple) {
+        const tags = _selectedValues
+          .map((v) => {
+            const opt = options.find((o) => o.value === v);
+            return opt ? { label: opt.label, value: opt.value } : null;
+          })
+          .filter(Boolean);
+        this.setData({ _selectedTags: tags });
+        this.triggerEvent('update:value', { value: [..._selectedValues] });
+      } else {
+        const idx = _pickerValue[0] || 0;
+        const selected = options[idx];
+        if (selected) {
+          this.triggerEvent('update:value', { value: selected.value });
+        }
+      }
+
+      this._notifyChange();
+      this.triggerEvent('close');
+    },
+
+    handleCancel() {
+      this.setData({ _visible: false });
+      this.triggerEvent('close');
+    },
+
+    handleClear() {
+      const { multiple } = this.data;
+      const emptyVal = multiple ? [] : '';
+      this.triggerEvent('update:value', { value: emptyVal });
+      this.triggerEvent('clear');
+      this._notifyChange();
+    },
+
+    handleTriggerClear() {
+      const { multiple } = this.data;
+      const emptyVal = multiple ? [] : '';
+      this.triggerEvent('update:value', { value: emptyVal });
+      this.triggerEvent('clear');
+      this._notifyChange();
+    },
+
+    handleTagRemove(e) {
+      if (this._isDisabled() || this.data.readonly) return;
+      const val = e.currentTarget.dataset.value;
+      const { value } = this.data;
+      const arr = Array.isArray(value) ? value.filter((v) => v !== val) : [];
+      this.triggerEvent('update:value', { value: arr });
+      this._notifyChange();
+    },
+  },
+});

package/miniprogram_dist/components/select/select.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "styleIsolation": "apply-shared",
+  "usingComponents": {
+    "w-drawer": "../drawer/drawer"
+  }
+}