v1.0.12

CHANGELOG.md

@@ -1,5 +1,24 @@
 ## 更新日志
 
+### 1.0.12
+
+*2019-10-24*
+
+#### 新增
+
+- 新增配置`pageEmptyShow`, 调整分页+搜索模式下, 如果无数据是否展示分页
+- 新增`create`创建条目时的回调参数`data`, 当前下拉的数据
+- 工具条新增反选`REVERSE`
+
+#### Bug fixes
+
+- 修复`create`创建条目时, 工具条不能操作的创建条目的问题
+- 修复`create`创建条目时, 分页页码显示异常的问题
+- 修复`create`创建条目时, 搜索不存在的回调逻辑
+- 修复多语言下工具条一直显示中文的问题
+- 调整分页模式下无数据显示页码 0 -> 1
+
+
 ### 1.0.11
 
 *2019-10-23*

docs/mds/XM08.md

@@ -2,6 +2,13 @@
 
 ### 启用分页
 
+```
+xmSelect.render({
+    //...
+    paging: true,
+})
+```
+
 :::demo 
 ```html
 <div id="demo1" class="xm-select-demo"></div>
@@ -33,6 +40,14 @@ var demo1 = xmSelect.render({
 
 每页3条
 
+```
+xmSelect.render({
+    //...
+    paging: true,
+    pageSize: 3,
+})
+```
+
 :::demo 
 ```html
 <div id="demo2" class="xm-select-demo"></div>
@@ -63,6 +78,15 @@ var demo2 = xmSelect.render({
 
 ### 搜索+分页
 
+```
+xmSelect.render({
+    //...
+    paging: true,
+    pageSize: 5,
+    filterable: true,
+})
+```
+
 :::demo 
 ```html
 <div id="demo3" class="xm-select-demo"></div>
@@ -108,3 +132,45 @@ document.getElementById('demo3-20').onclick = function(){
 </script>
 ```
 :::
+
+
+### 搜索 + 分页 无数据 不展示分页
+
+```
+xmSelect.render({
+    //...
+    paging: true,
+    pageSize: 3,
+    filterable: true,
+    pageEmptyShow: false,
+})
+```
+
+:::demo 
+```html
+<div id="demo4" class="xm-select-demo"></div>
+
+<script>
+var demo4 = xmSelect.render({
+    el: '#demo4', 
+    paging: true,
+    pageSize: 3,
+    filterable: true,
+    pageEmptyShow: false,
+    data: [
+        {name: '张三', value: 1},
+        {name: '李四', value: 2},
+        {name: '王五', value: 3},
+        {name: '赵六', value: 4},
+        {name: '苹果', value: 5},
+        {name: '香蕉', value: 6},
+        {name: '凤梨', value: 7},
+        {name: '葡萄', value: 8},
+        {name: '樱桃', value: 9},
+        {name: '车厘子', value: 10},
+        {name: '火龙果', value: 11},
+    ]
+})
+</script>
+```
+:::

docs/mds/XM19.md

@@ -109,3 +109,48 @@ var demo3 = xmSelect.render({
 </script>
 ```
 :::
+
+
+### 全部工具条
+
+```
+//全选, 清空, 反选
+xmSelect.render({
+    toolbar: {
+        show: true,
+        list: [ 'ALL', 'CLEAR', 'REVERSE' ]
+    },
+})
+```
+
+:::demo 
+```html
+<div id="demo4" class="xm-select-demo"></div>
+
+<script>
+var demo4 = xmSelect.render({
+    el: '#demo4', 
+    toolbar: {
+        show: true,
+        list: [ 'ALL', 'CLEAR', 'REVERSE' ]
+    },
+    filterable: true,
+    paging: true,
+    pageSize: 3,
+    data: [
+        {name: '张三', value: 1, selected: true},
+        {name: '李四', value: 2, selected: true},
+        {name: '王五', value: 3},
+        {name: '赵六', value: 4},
+        {name: '苹果', value: 5},
+        {name: '香蕉', value: 6},
+        {name: '凤梨', value: 7},
+        {name: '葡萄', value: 8},
+        {name: '樱桃', value: 9},
+        {name: '车厘子', value: 10},
+        {name: '火龙果', value: 11},
+    ]
+})
+</script>
+```
+:::

docs/mds/ZTEST.md

@@ -12,8 +12,10 @@ var demo1 = xmSelect.render({
     el: '#demo1', 
     autoRow: true,
     filterable: true,
-    create: val => {
+    toolbar: {show: true},
-        console.log(val)
+    paging: true,
+    create: (val, data) => {
+        console.log(val, data)
         return {
             name: val,
             value: val,

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "xm-select",
-	"version": "1.0.11",
+	"version": "1.0.12",
 	"description": "始于Layui的select多选解决方案",
 	"main": "index.js",
 	"scripts": {

src/components/config/language/en.js

@@ -2,4 +2,10 @@ export default {
 	tips: 'please selected',
 	empty: 'no data',
 	searchTips: 'please search',
+    toolbar: {
+        ALL: 'select all',
+        CLEAR: 'clear',
+        REVERSE: 'invert select',
+        SEARCH: 'search',
+    }
 }

src/components/config/language/zn.js

@@ -2,4 +2,10 @@ export default {
 	tips: '请选择',
 	empty: '暂无数据',
 	searchTips: '请选择',
+    toolbar: {
+        ALL: '全选',
+        CLEAR: '清空',
+        REVERSE: '反选',
+        SEARCH: '搜索',
+    }
 }

src/components/config/options.js

@@ -7,6 +7,10 @@ export default function (lan = 'zn') {
 	let setting = lanSetting[lan] || zn;
 
 	return {
+        //配置语言
+        language: lan,
+        //所有的语言配置
+        languageProp: setting,
 		//多选数据
 		data: [],
         //自定义数据
@@ -54,6 +58,8 @@ export default function (lan = 'zn') {
 		paging: false,
 		//分页每页的条数
 		pageSize: 10,
+        //分页无数据是否展示分页
+        pageEmptyShow: true,
 		//是否开启单选模式
 		radio: false,
 		//是否开启重复选模式

src/components/element/model/general.js

@@ -20,6 +20,7 @@ class General extends Component{
         this.searchCid = 0;
         this.inputOver = true;
         this.__value = '';
+        this.dynamicInput = false;
 	}
 
 	optionClick(item, selected, disabled, e){
@@ -182,7 +183,7 @@ class General extends Component{
                 }
                 arr = arr.filter(item => !item.__del);
                 //创建条目
-                creator = this.state.filterValue && isFunction(create) && create(this.state.filterValue);
+                creator = this.state.filterValue && isFunction(create);
 			}
 		}
 
@@ -209,29 +210,32 @@ class General extends Component{
 
 		let paging = '';
 		if(config.paging){
-			//计算当前分页的总页码
+            //计算当前分页的总页码
-			const size = Math.floor((arr.length - 1) / config.pageSize) + 1;
+            let size = Math.floor((arr.length - 1) / config.pageSize) + 1;
+            size <= 0 && (size = 1);
+
+            let pageIndex = this.state.pageIndex;
 
 			//如果当前页码大于总页码, 重置一下
-			if(this.state.pageIndex > size){
+			if(pageIndex > size){
-				this.changePageIndex(size);
+                pageIndex = size;
 			}
 
 			//如有总页码>1, 但是因为搜索造成的页码=0的情况
-			if(size > 0 && this.state.pageIndex <= 0){
+			if(size > 0 && pageIndex <= 0){
-				this.changePageIndex(1);
+                pageIndex = 1;
 			}
 
 			//实现简单的物理分页
-			let start = (this.state.pageIndex - 1) * config.pageSize;
+			let start = (pageIndex - 1) * config.pageSize;
 			let end = start + config.pageSize;
 			arr = arr.slice(start, end);
 
 			const disabledStyle = {cursor: 'no-drop', color: '#d2d2d2'};
 
 			let prevStyle = {}, nextStyle = {};
-			this.state.pageIndex <= 1 && (prevStyle = disabledStyle);
+			pageIndex <= 1 && (prevStyle = disabledStyle);
-			this.state.pageIndex == size && (nextStyle = disabledStyle);
+			pageIndex == size && (nextStyle = disabledStyle);
 
 			// const defaultCurrClass = {
 			// 	position: 'relative',
@@ -249,6 +253,9 @@ class General extends Component{
 			// 		}>{ i + 1 }</span>
 			// 	))
 			// }
+
+            this.state.pageIndex !== pageIndex && this.changePageIndex(pageIndex);
+
 			paging = (
 				<div class='xm-paging'>
 					<span style={ prevStyle } onClick={ this.pagePrevClick.bind(this) }>上一页</span>
@@ -256,7 +263,6 @@ class General extends Component{
 					<span style={ nextStyle } onClick={ e => this.pageNextClick.bind(this, e, size)() }>下一页</span>
 				</div>
 			)
-
 		}else{
             //检查是否设置了显示数量上限
             if(config.showCount > 0){
@@ -275,6 +281,12 @@ class General extends Component{
         });
         arr = newArr;
 
+        //查看是否创建了条目
+        if(creator){
+            creator = create(this.state.filterValue, deepMerge([], arr));
+            creator && arr.splice(0, 0, creator);
+        }
+
         let safetyArr = deepMerge([], arr);
         this.tempData = safetyArr;
 
@@ -283,18 +295,40 @@ class General extends Component{
             <div class='xm-toolbar'>
                 { config.toolbar.list.map(tool => {
                     const toolClass = 'toolbar-tag';
+                    const toolStyle = {};
 
-                    let info;
+                    let info, name = config.languageProp.toolbar[tool];
                     if(tool === 'ALL'){
-                        info = { icon: 'xm-iconfont xm-icon-quanxuan', name: '全选', method: (pageData) => {
+                        info = { icon: 'xm-iconfont xm-icon-quanxuan', name, method: (pageData) => {
                             const { optgroup, disabled } = prop;
                             const list = pageData.filter(item => !item[optgroup]).filter(item => !item[disabled])
                             this.props.onReset(mergeArr(list, sels, prop), 'sels');
                         } };
                     }else if(tool === 'CLEAR'){
-                        info = { icon: 'xm-iconfont xm-icon-qingkong', name: '清空', method: (pageData) => {
+                        info = { icon: 'xm-iconfont xm-icon-qingkong', name, method: (pageData) => {
                             this.props.onReset(sels.filter(item => item[prop.disabled]), 'sels');
                         } };
+                    }else if(tool === 'REVERSE'){
+                        info = { icon: 'xm-iconfont xm-icon-fanxuan', name, method: (pageData) => {
+                            const { optgroup, disabled } = prop;
+                            const list = pageData.filter(item => !item[optgroup]).filter(item => !item[disabled])
+
+                            let selectedList = [];
+                            sels.forEach(item => {
+                                let index = list.findIndex(pageItem => pageItem[value] === item[value]);
+                                if(index == -1){
+                                    selectedList.push(item);
+                                }else{
+                                    list.splice(index, 1);
+                                }
+                            })
+                            this.props.onReset(mergeArr(list, selectedList, prop), 'sels');
+                        } };
+                    }else if(tool === 'SEARCH'){
+                        toolStyle.color = theme.color;
+                        info = { icon: 'xm-iconfont xm-icon-sousuo', name, method: (pageData) => {
+                            
+                        } };
                     }else {
                         info = tool
                     }
@@ -304,7 +338,7 @@ class General extends Component{
                         if(e.type === 'mouseleave') e.target.style.color = '';
                     }
 
-                    return (<div class={ toolClass } onClick={ () => {
+                    return (<div class={ toolClass } style={ toolStyle } onClick={ () => {
                         isFunction(info.method) && info.method(safetyArr)
                     } } onMouseEnter={ hoverChange } onMouseLeave={ hoverChange }>
                         { config.toolbar.showIcon && <i class={ info.icon }></i> }
@@ -354,9 +388,9 @@ class General extends Component{
 		arr = arr.map(renderGroup);
 
 		if(!arr.length){
-			arr.push( creator ? renderItem(creator) : (
+            //查看无数据情况下是否显示分页
-                <div class="xm-select-empty">{ empty }</div>
+            !config.pageEmptyShow && (paging = '');
-            ))
+			arr.push(<div class="xm-select-empty">{ empty }</div>)
 		}
 
 		return (