feat(omiu): support selected and color setting

components/o-tree/demos/js-demo/index.html

@@ -18,9 +18,10 @@
 	<script src="../../../o-icon/accessible-rounded.js"></script>
 
 	<div>
-		<o-tree data=" [{
+		<o-tree style="width:400px;" data=" [{
 			label: '一级 1',
 			expanded: true,
+			selected: true,
 			children: [{
 				label: '二级 1-1',
 				children: [{
@@ -32,7 +33,8 @@
 			children: [{
 				label: '二级 2-1',
 				children: [{
-					label: '三级 2-1-1'
+					label: '三级 2-1-1',
+					color: 'red'
 				}]
 			}, {
 				label: '二级 2-2',

components/o-tree/src/index.d.ts

@@ -9,6 +9,7 @@ export default class Tree extends WeElement<Props> {
         data: ObjectConstructor;
     };
     onNodeClick: (evt: any, node: any) => void;
+    prevSelectedNode: any;
     onNodeArrowClick: () => void;
     renderNode(node: any, level: any): JSX.Element;
     render(props: any): JSX.Element;

components/o-tree/src/index.scss

@@ -634,6 +634,7 @@
 	display: block
 }
 
-.o-tree--highlight-current .o-tree-node.is-current>.o-tree-node__content {
-	background-color: #f0f7ff
+.o-tree-node.is-current>.o-tree-node__content {
+	background-color: $o-primary-fade-more;
+	background-color: var(--o-primary-fade-more, $o-primary-fade-more);
 }

components/o-tree/src/index.tsx

@@ -22,28 +22,35 @@ export default class Tree extends WeElement<Props>{
 	onNodeClick = (evt, node) => {
 		evt.stopPropagation()
 		node.expanded = !node.expanded
+		this.prevSelectedNode.selected = false
+		node.selected = true
 		this.forceUpdate()
 
 	}
 
+	prevSelectedNode
+
 	onNodeArrowClick = () => {
 
 	}
 
 	renderNode(node, level) {
+		if(node.selected) {
+			this.prevSelectedNode = node
+		}
 		return <div role="treeitem" onClick={(evt) => { this.onNodeClick(evt, node) }}
 			{...extractClass({}, 'o-tree-node', {
 				'is-expanded': node.expanded,
-			})}
-			draggable="false">
+				'is-current': node.selected
+			})}>
 			<div class="o-tree-node__content" style={`padding-left: ${level * 18}px;`}>
 				{/* <span class="expanded o-tree-node__expand-icon o-icon-caret-right"></span> */}
-				{node.children && node.children.length > 0 && <svg onClick={_ => this.onNodeArrowClick(_, node)} viewBox="0 0 1024 1024" {...extractClass({}, 'o-tree-node__expand-icon', {
+				{node.children && node.children.length > 0 && <svg onClick={_ => this.onNodeArrowClick()} viewBox="0 0 1024 1024" {...extractClass({}, 'o-tree-node__expand-icon', {
 					'expanded': node.expanded,
 				})} data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
 					<path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path>
 				</svg>}
-				<span class="o-tree-node__label">{node.label}</span></div>
+				<span style={node.color && { color: node.color }} class="o-tree-node__label">{node.label}</span></div>
 			{node.expanded && node.children && node.children.length > 0 && <div role="group" class="o-tree-node__children" style="" aria-expanded="true" data-old-padding-top="" data-old-padding-bottom="" data-old-overflow="">
 				{node.children.map(child => {
 					return this.renderNode(child, level + 1)

components/o-tree/theme.scss

@@ -2,6 +2,7 @@ $o-primary: #07c160;
 $o-primary-active: darken($o-primary, 10%);
 $o-primary-fade-little : fade-out($o-primary, 0.382);
 $o-primary-fade-some: fade-out($o-primary, 0.618);
+$o-primary-fade-more: fade-out($o-primary, 0.759);
 $o-primary-fade-lot: fade-out($o-primary, 0.9);
 
 $o-primary-hover-border: fade-out($o-primary, 0.618);
@@ -19,6 +20,7 @@ $options: (
 	primary-active: $o-primary-active,
 	primary-fade-little: $o-primary-fade-little,
 	primary-fade-some: $o-primary-fade-some,
+	primary-fade-more: $o-primary-fade-more,
 	primary-fade-lot: $o-primary-fade-lot,
 
 	danger: $o-danger,