bug fixed

CHANGELOG.md

@@ -1,5 +1,24 @@
 ## 更新日志
 
+### 1.2.4
+
+*2021-07-22*
+
+#### 新增
+
+- 新增渲染完成的回调`done`
+- `create`支持一次性创建多个, 返回一个数组即可 [#I40MU0](https://gitee.com/maplemei/xm-select/issues/I40MU0)
+- 增加预选配置`enableHoverFirst`, 默认选中第一项可选中数据 [#I3ZCRX](https://gitee.com/maplemei/xm-select/issues/I3ZCRX)
+- 新增focus后的样式提醒
+- 新增自定义设置选中键盘KeyCode配置`selectedKeyCode`, 可选 `xmSelect.KeyCode.Enter`, `xmSelect.KeyCode.Space`, 也可自行定义数值 [#I41NNI](https://gitee.com/maplemei/xm-select/issues/I41NNI)
+- 表单验证失败后 滚动到可视范围内 ##灰度##
+
+#### Bug fixes
+
+- 修复`tree`非严格模式下, 无法选中父节点
+- 修复`tree`模式下搜索后无法折叠的问题 [#I3XBF1](https://gitee.com/maplemei/xm-select/issues/I3XBF1)
+
+
 ### 1.2.3
 
 *2021-06-30*

build/webpack.config.js

@@ -94,6 +94,9 @@ const webpackConfig = {
 		new webpack.BannerPlugin(banner),
 		new VueLoaderPlugin(),
 	],
+	optimization: {
+		minimize: true,//可以自行配置是否压缩
+	},
 	devServer: {
 		host: '0.0.0.0',
 		port: 9001,

docs/mds/ZTEST.md

@@ -8,18 +8,17 @@
 xmSelect.render({
 	el: '#demo1', 
 	autoRow: true,
-	cascader: {
+	tree: {
 		show: true,
-		indent: 200,
 	},
 	height: '200px',
-	max: 1,
 	maxMethod(a, item){
 		console.log(item)
 	},
 	submitConversion(sels, prop){
 		return sels.map(item => item[prop.name]).join(',')
 	},
+	filterable: true,
 	data(){
 		return [
 			{name: '销售员', value: -1, disabled: false, children: [

docs/mds/options.md

@@ -46,6 +46,8 @@
 | toolbar			| 工具条, 具体看下表			 	|  object  		|   -  			|	-		|
 | showCount			| 展示在下拉框中的最多选项数量	|  int  		|   - 		 	|	0		|
 | enableKeyboard	| 是否启用键盘操作选项			|  boolean 		| true / false  |	true	|
+| enableHoverFirst	| 是否默认选中第一项				|  boolean 		| true / false  |	true	|
+| selectedKeyCode	| 选中的键盘KeyCode				|  int	 		| 全部KeyCode, 也可xmSelect.KeyCode.Enter,xmSelect.KeyCode.Space   |	13	|
 | autoRow			| 是否开启自动换行(选项过多时)	|  boolean  	| true / false  |	false	|
 | size				| 尺寸						 	|  string  		| large / medium / small / mini  |	medium	|
 | disabled			| 是否禁用多选				 	|  boolean		| true / false	|	false	|
@@ -53,6 +55,7 @@
 | tree				| 树形结构, 具体看下表			|  object		|	-  			|	-		|
 | cascader			| 级联结构, 具体看下表			|  object		|	-  			|	-		|
 | submitConversion	| 配置表单提交数据				|  function(sels, prop), sels: 已选中数据, prop: 自定义的prop	|	-  			|	-		|
+| done				| 渲染完成回调					|  function	|	-  			|	-		|
 
 
 ### prop

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "xm-select",
-	"version": "1.2.3",
+	"version": "1.2.4",
 	"description": "始于Layui的select多选解决方案",
 	"website": "https://maplemei.gitee.io/xm-select",
 	"main": "index.js",
@@ -8,7 +8,7 @@
 		"dev": "cross-env NODE_ENV=dev node_modules/.bin/webpack-dev-server --config build/webpack.config.js",
 		"build": "cross-env NODE_ENV=prod webpack --config build/webpack.config.js"
 	},
-	"author": "",
+	"author": "maplemei",
 	"license": "ISC",
 	"dependencies": {
 		"babel-polyfill": "^6.26.0",

src/components/framework/index.js

@@ -273,7 +273,7 @@ class Framework extends Component{
 		//如果是禁用状态, 不能进行操作
 		if(itemDisabled) return;
 
-		if(item[optgroup] && (tree.strict || cascader.strict)){
+		if(item[optgroup] && (tree.show && tree.strict || cascader.show && cascader.strict)){
 			let child = item[children], change = [], isAdd = true, handlerType;
 			if(item.__node.selected){
 				handlerType = 'del';
@@ -540,11 +540,16 @@ class Framework extends Component{
 		//监听键盘事件
 		this.base.addEventListener('keydown', e => {
 			let keyCode = e.keyCode;
+			//ENTER
 			if(keyCode === 13){
-				this.onClick()
+				this.onClick(e)
 			}
 		});
 		
+		// focus 可以监听tab切换
+		// this.base.addEventListener('focus', e => {
+		// })
+
 		//表单验证
 		this.input = this.base.querySelector('.xm-select-default');
 		//监听class的变化, 然后进行边框变色处理, 或者更多的处理
@@ -558,7 +563,7 @@ class Framework extends Component{
 							this.input.className = 'xm-select-default';
 							this.base.style.borderColor = this.props.theme.maxColor;
 							//这里可以自己新增一个回调, 也许看到源码的你能够看到
-							// this.base.scrollIntoView({ behavior: "smooth" });
+							this.base.scrollIntoView && this.base.scrollIntoView({ behavior: "smooth" });
 						}
 					}
 				}
@@ -578,6 +583,8 @@ class Framework extends Component{
 			dom = dom.parentElement;
 		}
 
+		let { done } = this.props;
+		done && done();
 	}
 
 	//此时页面又被重新渲染了

src/components/plugin/general.js

@@ -183,9 +183,7 @@ class General extends Component{
 				}
 				let val = data[index][value];
 				this.setState({ val })
-				//键盘选中时滚动到可视范围内
+				this.viewTo(val);
-				let opt = this.base.querySelector(`.xm-option[value="${ val }"]`);
-				opt && opt.scrollIntoView(false)
 			}else
 			//Down 键
 			if(keyCode === 40){
@@ -196,19 +194,24 @@ class General extends Component{
 				}
 				let val = data[index][value];
 				this.setState({ val })
-				//键盘选中时滚动到可视范围内
+				this.viewTo(val);
-				let opt = this.base.querySelector(`.xm-option[value="${ val }"]`);
-				opt && opt.scrollIntoView(false)
 			}else
 			//Enter 键
-			if(keyCode === 13){
+			if(keyCode === this.props.selectedKeyCode){
 				if(this.state.val != emptyVal){
 					let option = data[index];
 					this.optionClick(option, this.props.sels.findIndex(item => item[value] === this.state.val) != -1, option[disabled], e)
 				}
 			}
 		}
+	}
 
+	viewTo(val){
+		//键盘选中时滚动到可视范围内
+		if(void 0 != this.base){
+			let opt = this.base.querySelector(`.xm-option[value="${ val }"]`);
+			opt && opt.scrollIntoView(false)
+		}
 	}
 
 	//组件将要接收新属性
@@ -239,7 +242,7 @@ class General extends Component{
 	}
 
 	render(config) {
-		let { data, flatData, prop, template, theme, radio, sels, empty, filterable, filterMethod, remoteSearch, remoteMethod, delay, searchTips, create, pageRemote, max, enableKeyboard } = config
+		let { data, flatData, prop, template, theme, radio, sels, empty, filterable, filterMethod, remoteSearch, remoteMethod, delay, searchTips, create, pageRemote, max, enableKeyboard, enableHoverFirst } = config
 
 		const { name, value, disabled, children, optgroup } = prop;
 
@@ -359,7 +362,9 @@ class General extends Component{
 		//查看是否创建了条目
 		if(creator){
 			creator = create(this.state.filterValue, deepMerge([], arr));
-			creator && arr.splice(0, 0, {...creator, __node: {}});
+			if(void 0 != creator){
+				arr.splice(0, 0, ...(isArray(creator) ? creator : [creator]).map(i => ({ ...i, __node: {} })));
+			}
 		}
 
 		let safetyArr = deepMerge([], arr);
@@ -521,7 +526,11 @@ class General extends Component{
 
 		arr = arr.map(renderGroup);
 
-		if(!arr.length){
+		if(arr.length){
+			if(enableHoverFirst && this.state.val == emptyVal){
+				this.keydown('div', { keyCode: 40 })
+			}
+		}else{
 			//查看无数据情况下是否显示分页
 			!config.pageEmptyShow && (paging = '');
 			arr.push(<div class="xm-select-empty">{ empty }</div>)

src/components/plugin/tree.js

@@ -20,6 +20,7 @@ class Tree extends Component{
 		this.inputOver = true;
 		this.__value = '';
 		this.tempData = [];
+		this.__skipAutoExpand = '';
 	}
 
 	init(props){
@@ -180,11 +181,14 @@ class Tree extends Component{
 				}
 
 				if(!hiddenStatus){//如果是显示状态
+					if(this.__skipAutoExpand != val){//第一次搜索默认展开过滤后的数据
 						let keys = this.state.expandedKeys;
 						if(val && keys.findIndex(key => key === item[value]) === -1){
 							keys.push(item[value]);
 							this.setState({ expandedKeys: keys })
 						}
+						this.__skipAutoExpand = val;
+					}
 				}
 			}
 			item.__node.hidn = hiddenStatus;
@@ -216,6 +220,7 @@ class Tree extends Component{
 				//清空输入框的值
 				this.setState({ filterValue: '', val: emptyVal });
 				this.__value = '';
+				this.__skipAutoExpand = '';
 				this.searchInputRef && (this.searchInputRef.value = '');
 			}else{
 				//聚焦输入框

src/config/options.js

@@ -81,6 +81,10 @@ export default function (lan = 'zn') {
 		showCount: 0,
 		//是否开启键盘操作
 		enableKeyboard: true,
+		//开启键盘操作后是否默认选中第一条
+		enableHoverFirst: true,
+		//键盘选中的KeyCode, 默认是Enter
+		selectedKeyCode: 13,
 		//工具条
 		toolbar: {
 			show: false,
@@ -187,6 +191,9 @@ export default function (lan = 'zn') {
 		},
 		submitConversion(sels, prop){
 			return sels.map(item => item[prop.value]).join(',')
+		},
+		done(){
+
 		}
 	}
 }

src/index.js

@@ -10,6 +10,10 @@ export default {
 	name,
 	version,
 	doc: website,
+	KeyCode: {
+		Enter: 13,
+		Space: 32,
+	},
 	render(options) {
 		let { el } = options;
 		options.dom = selector(el);

src/style/index.less

@@ -61,7 +61,7 @@ xm-select{
 	cursor: pointer;
 	outline: none;
 
-	&:hover{
+	&:hover,&:focus{
 		border-color: #C0C4CC;
 	}