wedux-ui 0.1.0

package/miniprogram_dist/components/tree/tree.scss

@@ -0,0 +1,178 @@
+@import '../../styles/iconfont.scss';
+
+.w-tree {
+  position: relative;
+}
+
+/* Node */
+.w-tree__node {
+  display: flex;
+  align-items: center;
+  min-height: var(--size-tree-node-height);
+  padding-right: var(--spacing-md);
+  box-sizing: border-box;
+  transition: background-color 0.2s;
+}
+
+.w-tree__node--hover {
+  background-color: var(--color-press-overlay-light);
+}
+
+.w-tree__node--selected {
+  background-color: var(--color-tree-node-selected-bg);
+}
+
+.w-tree__node--selected .w-tree__label {
+  color: var(--color-brand);
+  font-weight: 500;
+}
+
+.w-tree__node--disabled {
+  opacity: 0.4;
+}
+
+/* Switcher */
+.w-tree__switcher {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 56rpx;
+  height: 56rpx;
+  flex-shrink: 0;
+}
+
+.w-tree__arrow {
+  font-size: 24rpx;
+  color: var(--color-text-secondary);
+  transition: transform 0.2s;
+  line-height: 1;
+}
+
+.w-tree__switcher--expanded .w-tree__arrow {
+  transform: rotate(90deg);
+}
+
+/* Loading spinner */
+.w-tree__loading {
+  width: 24rpx;
+  height: 24rpx;
+  border: 3rpx solid var(--color-separator);
+  border-top-color: var(--color-brand);
+  border-radius: 50%;
+  animation: w-tree-spin 0.6s linear infinite;
+}
+
+@keyframes w-tree-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Checkbox */
+.w-tree__checkbox {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48rpx;
+  height: 48rpx;
+  flex-shrink: 0;
+  margin-right: var(--spacing-xs);
+}
+
+.w-tree__checkbox-inner {
+  width: var(--size-checkbox);
+  height: var(--size-checkbox);
+  border: 2rpx solid var(--color-separator);
+  border-radius: 6rpx;
+  box-sizing: border-box;
+  transition:
+    background-color 0.2s,
+    border-color 0.2s;
+  position: relative;
+}
+
+.w-tree__checkbox--checked .w-tree__checkbox-inner {
+  background-color: var(--color-brand);
+  border-color: var(--color-brand);
+}
+
+.w-tree__checkbox--checked .w-tree__checkbox-inner::after {
+  content: '';
+  position: absolute;
+  top: 45%;
+  left: 50%;
+  width: 40%;
+  height: 20%;
+  border-left: 3rpx solid #fff;
+  border-bottom: 3rpx solid #fff;
+  transform: translate(-50%, -60%) rotate(-45deg);
+}
+
+.w-tree__checkbox--indeterminate .w-tree__checkbox-inner {
+  border-color: var(--color-brand);
+}
+
+.w-tree__checkbox--indeterminate .w-tree__checkbox-inner::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 50%;
+  height: 0;
+  border-bottom: 3rpx solid var(--color-brand);
+  transform: translate(-50%, -50%);
+}
+
+.w-tree__checkbox--disabled .w-tree__checkbox-inner {
+  opacity: 0.4;
+}
+
+/* Icon */
+.w-tree__icon {
+  font-size: 32rpx;
+  color: var(--color-text-secondary);
+  margin-right: var(--spacing-xs);
+  flex-shrink: 0;
+  line-height: 1;
+}
+
+/* Label */
+.w-tree__label {
+  flex: 1;
+  min-width: 0;
+  font-size: var(--font-size-md);
+  color: var(--color-text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Highlight */
+.w-tree__highlight {
+  color: var(--color-brand);
+  font-weight: 600;
+  background-color: var(--color-tree-node-highlight-bg);
+  border-radius: 4rpx;
+  padding: 0 2rpx;
+}
+
+/* Suffix */
+.w-tree__suffix {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  margin-left: var(--spacing-xs);
+  flex-shrink: 0;
+}
+
+/* Empty */
+.w-tree__empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-xl) 0;
+}
+
+.w-tree__empty-text {
+  font-size: var(--font-size-md);
+  color: var(--color-text-placeholder);
+}

package/miniprogram_dist/components/tree/tree.wxml

@@ -0,0 +1,59 @@
+<view class="w-tree">
+  <slot name="header"></slot>
+
+  <view wx:if="{{_visibleNodes.length === 0}}" class="w-tree__empty">
+    <text class="w-tree__empty-text">暂无数据</text>
+  </view>
+
+  <view
+    wx:for="{{_visibleNodes}}"
+    wx:key="key"
+    class="w-tree__node {{item.isSelected ? 'w-tree__node--selected' : ''}} {{item.disabled ? 'w-tree__node--disabled' : ''}}"
+    style="padding-left: {{item.paddingLeft}}rpx;"
+    data-key="{{item.key}}"
+    bindtap="handleNodeTap"
+    hover-class="{{item.disabled ? '' : 'w-tree__node--hover'}}"
+    hover-stay-time="70"
+  >
+    <!-- Switcher -->
+    <view
+      wx:if="{{!item.isLeaf}}"
+      class="w-tree__switcher {{item.isExpanded ? 'w-tree__switcher--expanded' : ''}}"
+      data-key="{{item.key}}"
+      catchtap="handleSwitcherTap"
+    >
+      <view wx:if="{{item.isLoading}}" class="w-tree__loading"></view>
+      <text wx:else class="w-tree__arrow iconfont icon-right"></text>
+    </view>
+    <view wx:else class="w-tree__switcher w-tree__switcher--leaf"></view>
+
+    <!-- Checkbox -->
+    <view
+      wx:if="{{checkable}}"
+      class="w-tree__checkbox {{item.isChecked ? 'w-tree__checkbox--checked' : ''}} {{item.isIndeterminate ? 'w-tree__checkbox--indeterminate' : ''}} {{item.disabled ? 'w-tree__checkbox--disabled' : ''}}"
+      data-key="{{item.key}}"
+      catchtap="handleCheckTap"
+    >
+      <view class="w-tree__checkbox-inner"></view>
+    </view>
+
+    <!-- Prefix icon -->
+    <text
+      wx:if="{{item.prefixIcon || item.icon}}"
+      class="w-tree__icon iconfont {{item.prefixIcon || item.icon}}"
+    ></text>
+
+    <!-- Label -->
+    <view class="w-tree__label">
+      <block wx:if="{{item.labelParts}}">
+        <text>{{item.labelParts[0]}}</text>
+        <text class="w-tree__highlight">{{item.labelParts[1]}}</text>
+        <text>{{item.labelParts[2]}}</text>
+      </block>
+      <text wx:else>{{item.label}}</text>
+    </view>
+
+    <!-- Suffix -->
+    <text wx:if="{{item.suffixText}}" class="w-tree__suffix">{{item.suffixText}}</text>
+  </view>
+</view>

package/miniprogram_dist/components/tree-select/tree-select.js

@@ -0,0 +1,260 @@
+const formField = require('../../behaviors/formField');
+
+Component({
+  behaviors: ['wx://form-field', formField],
+
+  options: {
+    multipleSlots: true,
+  },
+
+  relations: {
+    '../form-item/form-item': {
+      type: 'ancestor',
+    },
+  },
+
+  properties: {
+    value: { type: null, value: null },
+    data: { type: Array, value: [] },
+    mode: { type: String, value: 'half' },
+    title: { type: String, value: '' },
+    placeholder: { type: String, value: '请选择' },
+    disabled: { type: Boolean, value: false },
+    readonly: { type: Boolean, value: false },
+    clearable: { type: Boolean, value: false },
+    multiple: { type: Boolean, value: false },
+    checkable: { type: Boolean, value: false },
+    cascade: { type: Boolean, value: true },
+    checkStrategy: { type: String, value: 'all' },
+    showPath: { type: Boolean, value: false },
+    pathSeparator: { type: String, value: ' / ' },
+    maxTagCount: { type: Number, value: 0 },
+    filterable: { type: Boolean, value: false },
+    size: { type: String, value: '' },
+    status: { type: String, value: '' },
+    // Pass-through to tree
+    keyField: { type: String, value: 'key' },
+    labelField: { type: String, value: 'label' },
+    childrenField: { type: String, value: 'children' },
+    accordion: { type: Boolean, value: false },
+    showLine: { type: Boolean, value: false },
+    defaultExpandAll: { type: Boolean, value: false },
+  },
+
+  data: {
+    _visible: false,
+    _displayText: '',
+    _selectedTags: [],
+    _overflowCount: 0,
+    _searchPattern: '',
+  },
+
+  lifetimes: {
+    attached() {
+      this._syncDisplay();
+    },
+  },
+
+  observers: {
+    'value, data'() {
+      this._syncDisplay();
+    },
+  },
+
+  methods: {
+    // ===== Form Integration =====
+
+    _getTree() {
+      return this.selectComponent('.w-tree-select__tree');
+    },
+
+    // ===== Display Sync =====
+
+    _syncDisplay() {
+      const {
+        value,
+        multiple,
+        checkable,
+        data,
+        showPath,
+        pathSeparator,
+        maxTagCount,
+        keyField,
+        labelField,
+        childrenField,
+      } = this.data;
+
+      if (!data || !data.length) {
+        this.setData({ _displayText: '', _selectedTags: [], _overflowCount: 0 });
+        return;
+      }
+
+      // Build a quick node map for display
+      const nodeMap = {};
+      const buildMap = (nodes, parentLabels) => {
+        if (!nodes) return;
+        nodes.forEach((n) => {
+          const key = String(n[keyField]);
+          const label = n[labelField] || '';
+          const path = [...parentLabels, label];
+          nodeMap[key] = { label, path };
+          if (n[childrenField]) {
+            buildMap(n[childrenField], path);
+          }
+        });
+      };
+      buildMap(data, []);
+
+      if (multiple || checkable) {
+        const vals = Array.isArray(value) ? value : [];
+        const allTags = vals.map((v) => {
+          const node = nodeMap[String(v)];
+          return {
+            value: v,
+            label: node ? (showPath ? node.path.join(pathSeparator) : node.label) : String(v),
+          };
+        });
+
+        let displayTags = allTags;
+        let overflow = 0;
+        if (maxTagCount > 0 && allTags.length > maxTagCount) {
+          displayTags = allTags.slice(0, maxTagCount);
+          overflow = allTags.length - maxTagCount;
+        }
+
+        this.setData({
+          _selectedTags: displayTags,
+          _overflowCount: overflow,
+          _displayText: '',
+        });
+      } else {
+        const node = value != null ? nodeMap[String(value)] : null;
+        const text = node ? (showPath ? node.path.join(pathSeparator) : node.label) : '';
+        this.setData({ _displayText: text, _selectedTags: [], _overflowCount: 0 });
+      }
+    },
+
+    _syncTreeState() {
+      const tree = this._getTree();
+      if (!tree) return;
+
+      const { value, multiple, checkable } = this.data;
+
+      if (checkable) {
+        const keys = Array.isArray(value) ? value.map(String) : [];
+        tree.setData({ checkedKeys: keys });
+      } else if (multiple) {
+        const keys = Array.isArray(value) ? value.map(String) : [];
+        tree.setData({ selectedKeys: keys });
+      } else {
+        const keys = value != null ? [String(value)] : [];
+        tree.setData({ selectedKeys: keys });
+      }
+    },
+
+    // ===== Tree Event Handlers =====
+
+    _readTreeValue() {
+      const tree = this._getTree();
+      if (!tree) return this.data.value;
+
+      if (this.data.checkable) {
+        return tree._getOutputCheckedKeys();
+      } else if (this.data.multiple) {
+        return Object.keys(tree.data._selectedKeySet).filter((k) => tree.data._selectedKeySet[k]);
+      } else {
+        const keys = Object.keys(tree.data._selectedKeySet).filter(
+          (k) => tree.data._selectedKeySet[k],
+        );
+        return keys.length ? keys[0] : null;
+      }
+    },
+
+    handleTreeSelect(e) {
+      const { keys } = e.detail;
+      if (this.data.multiple) {
+        this._pendingValue = keys;
+      } else {
+        this._pendingValue = keys.length ? keys[0] : null;
+      }
+    },
+
+    handleTreeCheck(e) {
+      const { keys } = e.detail;
+      this._pendingValue = keys;
+    },
+
+    // ===== Event Handlers =====
+
+    handleTap() {
+      if (this._isDisabled() || this.data.readonly) return;
+      this._pendingValue = undefined;
+      this.setData({ _visible: true, _searchPattern: '' });
+      // Tree sync deferred to afterenter when DOM is ready
+      this.triggerEvent('open');
+    },
+
+    handleDrawerAfterEnter() {
+      this._syncTreeState();
+    },
+
+    handleCancel() {
+      this.setData({ _visible: false, _searchPattern: '' });
+      this._pendingValue = undefined;
+      this.triggerEvent('cancel');
+      this.triggerEvent('close');
+    },
+
+    handleConfirm() {
+      const value = this._pendingValue !== undefined ? this._pendingValue : this._readTreeValue();
+      this._pendingValue = undefined;
+      this._emitValue(value);
+      this.triggerEvent('confirm', { value });
+      this.setData({ _visible: false, _searchPattern: '' });
+      this.triggerEvent('close');
+    },
+
+    handleTriggerClear() {
+      const emptyVal = this.data.multiple || this.data.checkable ? [] : null;
+      this._emitValue(emptyVal);
+    },
+
+    handleTagRemove(e) {
+      const removeVal = e.currentTarget.dataset.value;
+      const currentValue = Array.isArray(this.data.value) ? [...this.data.value] : [];
+      const idx = currentValue.indexOf(removeVal);
+      if (idx !== -1) {
+        currentValue.splice(idx, 1);
+        this._emitValue(currentValue);
+      }
+    },
+
+    handleSearchInput(e) {
+      this.setData({ _searchPattern: e.detail.value });
+    },
+
+    handleDrawerClose() {
+      this._pendingValue = undefined;
+      this.setData({ _visible: false, _searchPattern: '' });
+      this.triggerEvent('close');
+    },
+
+    // ===== Value Emission =====
+
+    _emitValue(value) {
+      const tree = this._getTree();
+      const nodes = [];
+      if (tree) {
+        const keys = Array.isArray(value) ? value : value != null ? [value] : [];
+        keys.forEach((k) => {
+          const node = tree._getNodeByKey(String(k));
+          if (node) nodes.push(node.raw);
+        });
+      }
+
+      this.triggerEvent('update:value', { value, nodes });
+
+      this._notifyChange();
+    },
+  },
+});

package/miniprogram_dist/components/tree-select/tree-select.json

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