uview-plus 3.7.36 → 3.8.32

package/components/u-toast/u-toast.vue

@@ -2,7 +2,7 @@
 	<view class="u-toast">
 		<u-overlay
 			:show="isShow"
-			:zIndex="tmpConfig.overlay ? tmpConfig.zIndex : -1"
+			:zIndex="tmpConfig.zIndex"
 			:custom-style="overlayStyle"
 		>
 			<view
@@ -112,6 +112,10 @@
 				}
 				// 将遮罩设置为100%透明度，避免出现灰色背景
 				style.backgroundColor = 'rgba(0, 0, 0, 0)'
+				// overlay=false时不阻止点击穿透
+				if (!this.tmpConfig.overlay) {
+					style.pointerEvents = 'none'
+				}
 				return style
 			},
 			iconStyle() {
@@ -205,20 +209,20 @@
 	$u-toast-content-text-font-size:15px !default;
 	$u-toast-up-icon:10rpx !default;
 	$u-toast-u-type-primary-color:$u-primary !default;
-	$u-toast-u-type-primary-background-color:#ecf5ff !default;
-	$u-toast-u-type-primary-border-color:rgb(215, 234, 254) !default;
+	$u-toast-u-type-primary-background-color:$u-primary-light !default;
+	$u-toast-u-type-primary-border-color:$u-primary-disabled !default;
 	$u-toast-u-type-primary-border-width:1px !default;
 	$u-toast-u-type-success-color: $u-success !default;
-	$u-toast-u-type-success-background-color: #dbf1e1 !default;
-	$u-toast-u-type-success-border-color: #BEF5C8 !default;
+	$u-toast-u-type-success-background-color: $u-success-light !default;
+	$u-toast-u-type-success-border-color: $u-success-disabled !default;
 	$u-toast-u-type-success-border-width: 1px !default;
 	$u-toast-u-type-error-color:$u-error !default;
-	$u-toast-u-type-error-background-color:#fef0f0 !default;
-	$u-toast-u-type-error-border-color:#fde2e2 !default;
+	$u-toast-u-type-error-background-color:$u-error-light !default;
+	$u-toast-u-type-error-border-color:$u-error-disabled !default;
 	$u-toast-u-type-error-border-width: 1px !default;
 	$u-toast-u-type-warning-color:$u-warning !default;
-	$u-toast-u-type-warning-background-color:#fdf6ec !default;
-	$u-toast-u-type-warning-border-color:#faecd8 !default;
+	$u-toast-u-type-warning-background-color:$u-warning-light !default;
+	$u-toast-u-type-warning-border-color:$u-warning-disabled !default;
 	$u-toast-u-type-warning-border-width: 1px !default;
 	$u-toast-u-type-default-color:#fff !default;
 	$u-toast-u-type-default-background-color:#585858 !default;

package/components/u-tooltip/u-tooltip.vue

@@ -19,6 +19,7 @@
 					:selectable="false"
 					:style="{
 						color: color,
+						fontSize: $u.addUnit(size),
 						backgroundColor: bgColor && showTooltip && tooltipTop !== -10000 ? bgColor : 'transparent'
 					}"
 				>{{ text }}</text>

package/components/u-tree/u-tree.vue

@@ -1,41 +1,81 @@
 <template>
   <view class="u-tree">
-    <tree-node
-      v-for="node in treeData"
-      :key="node[props.nodeKey]"
-      :node="node"
-      :props="props"
-      :show-checkbox="showCheckbox"
-      :check-strictly="checkStrictly"
-      :expand-on-click-node="expandOnClickNode"
-      @node-click="handleNodeClick"
-      @check-change="$emit('check-change', $event)">
-      <template #default="{ nodeData, level }">
-        <slot :node="nodeData" :level="level"></slot>
-      </template>
-    </tree-node>
+    <view
+      v-for="item in visibleNodes"
+      :key="item.key"
+      class="u-tree-node"
+      :class="getNodeClass(item)"
+    >
+      <view
+        class="u-tree-node__content"
+        :style="getNodeContentStyle(item)"
+        @tap="handleNodeClick(item)"
+      >
+        <view class="u-tree-node__switcher" @tap.stop="handleExpandClick(item)">
+          <up-icon
+            v-if="item.hasChildren"
+            :name="item.expanded ? collapseIcon : expandIcon"
+            :size="iconSize"
+            :color="switcherColor"
+          />
+        </view>
+        <up-checkbox
+          v-if="showCheckbox"
+          class="u-tree-node__checkbox"
+          usedAlone
+          :size="checkboxSize"
+          :checked="item.checked"
+          :disabled="item.disabled"
+          @change="handleCheckboxChange(item, $event)"
+        />
+        <view class="u-tree-node__label">
+          <!-- #ifndef MP-WEIXIN -->
+          <slot
+            :node="item.node"
+            :data="item.node"
+            :level="item.level + 1"
+            :expanded="item.expanded"
+            :checked="item.checked"
+            :indeterminate="item.indeterminate"
+            :disabled="item.disabled"
+          >
+            <text class="u-tree-node__text">{{ getNodeLabel(item.node) }}</text>
+          </slot>
+          <!-- #endif -->
+          <!-- #ifdef MP-WEIXIN -->
+          <text class="u-tree-node__text">{{ getNodeLabel(item.node) }}</text>
+          <!-- #endif -->
+        </view>
+      </view>
+    </view>
   </view>
 </template>
 
 <script>
-import TreeNode from './tree-node.vue';
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
 
 export default {
   name: 'u-tree',
-  components: { TreeNode },
+  mixins: [mpMixin, mixin],
   props: {
     data: {
       type: Array,
-      required: true
+      default: () => []
     },
     props: {
       type: Object,
       default: () => ({
         label: 'label',
         children: 'children',
-        nodeKey: 'id'
+        nodeKey: 'id',
+        disabled: 'disabled'
       })
     },
+    nodeKey: {
+      type: String,
+      default: ''
+    },
     showCheckbox: {
       type: Boolean,
       default: false
@@ -44,74 +84,474 @@ export default {
       type: Boolean,
       default: false
     },
+    defaultExpandedKeys: {
+      type: Array,
+      default: () => []
+    },
+    defaultCheckedKeys: {
+      type: Array,
+      default: () => []
+    },
     expandOnClickNode: {
       type: Boolean,
       default: true
     },
+    checkOnClickNode: {
+      type: Boolean,
+      default: false
+    },
     checkStrictly: {
       type: Boolean,
       default: false
+    },
+    accordion: {
+      type: Boolean,
+      default: false
+    },
+    highlightCurrent: {
+      type: Boolean,
+      default: false
+    },
+    currentNodeKey: {
+      type: [String, Number],
+      default: ''
+    },
+    indent: {
+      type: [String, Number],
+      default: 32
+    },
+    iconSize: {
+      type: [String, Number],
+      default: 14
+    },
+    checkboxSize: {
+      type: [String, Number],
+      default: 16
+    },
+    expandIcon: {
+      type: String,
+      default: 'play-right-fill'
+    },
+    collapseIcon: {
+      type: String,
+      default: 'arrow-down-fill'
     }
   },
   data() {
     return {
-      treeData: []
+      treeData: [],
+      currentKey: '',
+      nodeMap: {},
+      privateKeySeed: 0
     };
   },
-  created() {
-    this.initTree();
+  computed: {
+    treeProps() {
+      return Object.assign({
+        label: 'label',
+        children: 'children',
+        nodeKey: 'id',
+        disabled: 'disabled'
+      }, this.props || {});
+    },
+    labelKey() {
+      return this.treeProps.label;
+    },
+    childrenKey() {
+      return this.treeProps.children;
+    },
+    disabledKey() {
+      return this.treeProps.disabled;
+    },
+    keyField() {
+      return this.nodeKey || this.treeProps.nodeKey || 'id';
+    },
+    visibleNodes() {
+      const result = [];
+      this.collectVisibleNodes(this.treeData, 0, result);
+      return result;
+    },
+    switcherColor() {
+      return this.upThemeVar('--up-content-color', '#606266');
+    }
   },
   watch: {
     data: {
-      handler(newVal) {
-        this.treeData = JSON.parse(JSON.stringify(newVal));
-        this.initExpandedState(this.treeData, this.defaultExpandAll);
+      handler() {
+        this.initTree();
       },
       deep: true,
       immediate: true
+    },
+    props: {
+      handler() {
+        this.initTree();
+      },
+      deep: true
+    },
+    nodeKey() {
+      this.initTree();
+    },
+    defaultExpandAll() {
+      this.initTree();
+    },
+    defaultExpandedKeys() {
+      this.initTree();
+    },
+    defaultCheckedKeys() {
+      this.initTree();
+    },
+    checkStrictly() {
+      this.initTree();
+    },
+    currentNodeKey: {
+      handler(value) {
+        this.currentKey = value;
+      },
+      immediate: true
     }
   },
-  emits: ['node-click', 'check-change'],
+  emits: [
+    'node-click',
+    'check-change',
+    'check',
+    'node-expand',
+    'node-collapse',
+    'current-change'
+  ],
   methods: {
     initTree() {
-      this.treeData = JSON.parse(JSON.stringify(this.data));
-      this.initExpandedState(this.treeData, this.defaultExpandAll);
+      this.privateKeySeed = 0;
+      this.nodeMap = {};
+      this.treeData = this.cloneNodes(this.data || [], null, 0);
+      if (!this.checkStrictly) {
+        this.syncParentChecked(this.treeData);
+      }
     },
-    initExpandedState(nodes, expanded) {
+    cloneNodes(nodes, parent, level) {
+      const list = [];
+      nodes.forEach((node, index) => {
+        const clone = Object.assign({}, node);
+        const key = this.resolveNodeKey(clone, parent, index);
+        const children = Array.isArray(node[this.childrenKey]) ? node[this.childrenKey] : [];
+        const expanded = this.defaultExpandAll || this.includesKey(this.defaultExpandedKeys, key) || clone.expanded === true;
+        const checked = this.includesKey(this.defaultCheckedKeys, key) || clone.checked === true;
+
+        clone.__uTreeKey = key;
+        clone.expanded = expanded;
+        clone.checked = checked;
+        clone.indeterminate = false;
+        clone[this.childrenKey] = this.cloneNodes(children, clone, level + 1);
+        if (checked && !this.checkStrictly) {
+          this.setChildrenChecked(clone, true);
+        }
+
+        this.nodeMap[key] = {
+          node: clone,
+          parent,
+          level
+        };
+        list.push(clone);
+      });
+      return list;
+    },
+    resolveNodeKey(node, parent, index) {
+      const rawKey = node[this.keyField];
+      if (rawKey !== undefined && rawKey !== null && rawKey !== '') {
+        return rawKey;
+      }
+      const parentKey = parent ? parent.__uTreeKey : 'root';
+      this.privateKeySeed += 1;
+      return parentKey + '-' + index + '-' + this.privateKeySeed;
+    },
+    collectVisibleNodes(nodes, level, result) {
       nodes.forEach(node => {
-        node.expanded = expanded;
-        if (node[this.props.children]) {
-          this.initExpandedState(node[this.props.children], expanded);
+        const children = this.getChildren(node);
+        const key = this.getNodeKey(node);
+        result.push({
+          key,
+          node,
+          level,
+          hasChildren: children.length > 0,
+          expanded: node.expanded === true,
+          checked: node.checked === true,
+          indeterminate: node.indeterminate === true,
+          disabled: this.isNodeDisabled(node)
+        });
+        if (children.length > 0 && node.expanded === true) {
+          this.collectVisibleNodes(children, level + 1, result);
         }
       });
     },
-    handleNodeClick(node) {
+    getChildren(node) {
+      const children = node ? node[this.childrenKey] : [];
+      return Array.isArray(children) ? children : [];
+    },
+    getNodeKey(node) {
+      return node ? node.__uTreeKey : '';
+    },
+    getNodeLabel(node) {
+      const label = node ? node[this.labelKey] : '';
+      return label === undefined || label === null ? '' : label;
+    },
+    isNodeDisabled(node) {
+      return !!(node && node[this.disabledKey]);
+    },
+    includesKey(keys, key) {
+      return Array.isArray(keys) && keys.indexOf(key) !== -1;
+    },
+    getNodeClass(item) {
+      const classes = [];
+      if (this.highlightCurrent && item.key === this.currentKey) {
+        classes.push('u-tree-node--current');
+      }
+      if (item.disabled) {
+        classes.push('u-tree-node--disabled');
+      }
+      return classes.join(' ');
+    },
+    getNodeContentStyle(item) {
+      return {
+        paddingLeft: this.getIndentValue(item.level)
+      };
+    },
+    getIndentValue(level) {
+      const indent = String(this.indent);
+      const matched = indent.match(/^(\d+(?:\.\d+)?)(.*)$/);
+      if (!matched) {
+        return indent;
+      }
+      const unit = matched[2] || 'rpx';
+      return (Number(matched[1]) * level) + unit;
+    },
+    handleNodeClick(item) {
+      const node = item.node;
+      const oldCurrentNode = this.getCurrentNode();
+
+      this.currentKey = item.key;
+      if (this.expandOnClickNode && item.hasChildren) {
+        this.toggleExpand(item);
+      }
+      if (this.checkOnClickNode && this.showCheckbox && !item.disabled) {
+        this.setNodeChecked(node, !node.checked, true);
+        this.emitCheck(node);
+      }
+
       this.$emit('node-click', node);
+      if (oldCurrentNode !== node) {
+        this.$emit('current-change', node, oldCurrentNode);
+      }
     },
-    /**
-     * 直接递归 treeData 获取所有 checked 的节点
-     */
-    getCheckedNodes() {
-        const traverse = (nodes) => {
-            let result = [];
-            nodes.forEach(node => {
-            if (node.checked) {
-                result.push(node);
-            }
-            if (node[this.props.children] && node[this.props.children].length > 0) {
-                result = result.concat(traverse(node[this.props.children]));
-            }
-            });
-            return result;
-        };
-        return traverse(this.treeData);
+    handleExpandClick(item) {
+      if (!item.hasChildren) {
+        return;
+      }
+      this.toggleExpand(item);
+    },
+    toggleExpand(item) {
+      const node = item.node;
+      const nextExpanded = node.expanded !== true;
+      if (this.accordion && nextExpanded) {
+        this.collapseSiblingNodes(node);
+      }
+      node.expanded = nextExpanded;
+      this.$emit(nextExpanded ? 'node-expand' : 'node-collapse', node);
+    },
+    collapseSiblingNodes(node) {
+      const parent = this.getParentNode(node);
+      const siblings = parent ? this.getChildren(parent) : this.treeData;
+      siblings.forEach(sibling => {
+        if (sibling !== node) {
+          sibling.expanded = false;
+        }
+      });
+    },
+    handleCheckboxChange(item, checked) {
+      if (item.disabled) {
+        return;
+      }
+      this.setNodeChecked(item.node, checked, true);
+      this.$emit('check-change', item.node, checked);
+      this.emitCheck(item.node);
+    },
+    setNodeChecked(node, checked, deep) {
+      node.checked = checked;
+      node.indeterminate = false;
+      if (!this.checkStrictly && deep !== false) {
+        this.setChildrenChecked(node, checked);
+      }
+      if (!this.checkStrictly) {
+        this.updateParentChecked(node);
+      }
+    },
+    setChildrenChecked(node, checked) {
+      this.getChildren(node).forEach(child => {
+        if (!this.isNodeDisabled(child)) {
+          child.checked = checked;
+          child.indeterminate = false;
+          this.setChildrenChecked(child, checked);
+        }
+      });
+    },
+    updateParentChecked(node) {
+      const parent = this.getParentNode(node);
+      if (!parent) {
+        return;
+      }
+      const children = this.getChildren(parent).filter(child => !this.isNodeDisabled(child));
+      const allChecked = children.length > 0 && children.every(child => child.checked === true);
+      const someChecked = children.some(child => child.checked === true || child.indeterminate === true);
+      parent.checked = allChecked;
+      parent.indeterminate = !allChecked && someChecked;
+      this.updateParentChecked(parent);
+    },
+    syncParentChecked(nodes) {
+      nodes.forEach(node => {
+        const children = this.getChildren(node);
+        if (children.length > 0) {
+          this.syncParentChecked(children);
+          const enabledChildren = children.filter(child => !this.isNodeDisabled(child));
+          const allChecked = enabledChildren.length > 0 && enabledChildren.every(child => child.checked === true);
+          const someChecked = enabledChildren.some(child => child.checked === true || child.indeterminate === true);
+          node.checked = allChecked;
+          node.indeterminate = !allChecked && someChecked;
+        }
+      });
+    },
+    getParentNode(node) {
+      const mapItem = this.nodeMap[this.getNodeKey(node)];
+      return mapItem ? mapItem.parent : null;
+    },
+    walkNodes(nodes, callback) {
+      nodes.forEach(node => {
+        callback(node);
+        this.walkNodes(this.getChildren(node), callback);
+      });
+    },
+    getNodeByKey(key) {
+      const mapItem = this.nodeMap[key];
+      return mapItem ? mapItem.node : null;
+    },
+    getCheckedNodes(leafOnly) {
+      const result = [];
+      this.walkNodes(this.treeData, node => {
+        const isLeaf = this.getChildren(node).length === 0;
+        if (node.checked === true && (!leafOnly || isLeaf)) {
+          result.push(node);
+        }
+      });
+      return result;
+    },
+    getCheckedKeys(leafOnly) {
+      return this.getCheckedNodes(leafOnly).map(node => this.getNodeKey(node));
+    },
+    getHalfCheckedNodes() {
+      const result = [];
+      this.walkNodes(this.treeData, node => {
+        if (node.indeterminate === true) {
+          result.push(node);
+        }
+      });
+      return result;
+    },
+    getHalfCheckedKeys() {
+      return this.getHalfCheckedNodes().map(node => this.getNodeKey(node));
+    },
+    setCheckedKeys(keys, leafOnly) {
+      const checkedKeys = Array.isArray(keys) ? keys : [];
+      this.walkNodes(this.treeData, node => {
+        node.checked = false;
+        node.indeterminate = false;
+      });
+      checkedKeys.forEach(key => {
+        const node = this.getNodeByKey(key);
+        if (node) {
+          const isLeaf = this.getChildren(node).length === 0;
+          if (!leafOnly || isLeaf) {
+            this.setNodeChecked(node, true, !this.checkStrictly);
+          }
+        }
+      });
+      if (!this.checkStrictly) {
+        this.syncParentChecked(this.treeData);
+      }
+    },
+    setChecked(key, checked, deep) {
+      const node = typeof key === 'object' ? key : this.getNodeByKey(key);
+      if (node) {
+        this.setNodeChecked(node, checked, deep);
+      }
+    },
+    setCurrentKey(key) {
+      this.currentKey = key;
+    },
+    getCurrentKey() {
+      return this.currentKey;
+    },
+    getCurrentNode() {
+      return this.getNodeByKey(this.currentKey);
+    },
+    emitCheck(node) {
+      this.$emit('check', node, {
+        checkedNodes: this.getCheckedNodes(false),
+        checkedKeys: this.getCheckedKeys(false),
+        halfCheckedNodes: this.getHalfCheckedNodes(),
+        halfCheckedKeys: this.getHalfCheckedKeys()
+      });
     }
   }
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .u-tree {
   font-size: 28rpx;
+  color: var(--up-main-color, #303133);
+}
+
+.u-tree-node__content {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  min-height: 72rpx;
+  box-sizing: border-box;
+  border-radius: 8rpx;
+}
+
+.u-tree-node--current .u-tree-node__content {
+  background-color: var(--up-primary-light, #ecf5ff);
+}
+
+.u-tree-node--disabled {
+  opacity: 0.55;
+}
+
+.u-tree-node__switcher {
+  width: 36rpx;
+  height: 36rpx;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.u-tree-node__checkbox {
+  margin-left: 8rpx;
+  margin-right: 8rpx;
+}
+
+.u-tree-node__label {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.u-tree-node__text {
+  color: var(--up-main-color, #303133);
+  font-size: 28rpx;
+  line-height: 40rpx;
 }
-</style>
+</style>