From f27ae9ba9f1e32a3be80dbbfe46fdfd1b1fd112e Mon Sep 17 00:00:00 2001 From: maplemei Date: Tue, 30 Apr 2019 11:07:58 +0800 Subject: [PATCH] init --- .babelrc | 5 + .gitignore | 27 +- LICENSE | 2 +- README.en.md | 31 --- README.md | 343 ++++++++++++++++++++++-- dist/index.html | 1 + dist/xm-select.js | 1 + docs/index.html | 240 +++++++++++++++++ package.json | 28 ++ src/components/common/util.js | 59 ++++ src/components/config/language/en.js | 4 + src/components/config/language/zn.js | 4 + src/components/config/options.js | 67 +++++ src/components/core/index.js | 113 ++++++++ src/components/element/framework.js | 114 ++++++++ src/components/element/header.js | 0 src/components/element/label.js | 76 ++++++ src/components/element/model/general.js | 51 ++++ src/components/element/tips.js | 20 ++ src/components/preact/index.js | 311 +++++++++++++++++++++ src/index.ejs | 19 ++ src/index.js | 26 ++ src/style/iconfont.less | 61 +++++ src/style/index.less | 209 +++++++++++++++ webpack.config.js | 52 ++++ 25 files changed, 1786 insertions(+), 78 deletions(-) create mode 100644 .babelrc create mode 100644 dist/index.html create mode 100644 dist/xm-select.js create mode 100644 docs/index.html create mode 100644 package.json create mode 100644 src/components/common/util.js create mode 100644 src/components/config/language/en.js create mode 100644 src/components/config/language/zn.js create mode 100644 src/components/config/options.js create mode 100644 src/components/core/index.js create mode 100644 src/components/element/framework.js create mode 100644 src/components/element/header.js create mode 100644 src/components/element/label.js create mode 100644 src/components/element/model/general.js create mode 100644 src/components/element/tips.js create mode 100644 src/components/preact/index.js create mode 100644 src/index.ejs create mode 100644 src/index.js create mode 100644 src/style/iconfont.less create mode 100644 src/style/index.less create mode 100644 webpack.config.js diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..9c8e353 --- /dev/null +++ b/.babelrc @@ -0,0 +1,5 @@ +{ + "plugins": [ + ["transform-react-jsx", { "pragma":"h" }] + ] +} \ No newline at end of file diff --git a/.gitignore b/.gitignore index 135767f..a76066d 100644 --- a/.gitignore +++ b/.gitignore @@ -1,26 +1,3 @@ -# General .DS_Store -.AppleDouble -.LSOverride - -# Icon must end with two \r -Icon - -# Thumbnails -._* - -# Files that might appear in the root of a volume -.DocumentRevisions-V100 -.fseventsd -.Spotlight-V100 -.TemporaryItems -.Trashes -.VolumeIcon.icns -.com.apple.timemachine.donotpresent - -# Directories potentially created on remote AFP share -.AppleDB -.AppleDesktop -Network Trash Folder -Temporary Items -.apdisk +node_modules/* +yarn.lock \ No newline at end of file diff --git a/LICENSE b/LICENSE index 261eeb9..4e7217c 100644 --- a/LICENSE +++ b/LICENSE @@ -186,7 +186,7 @@ same "printed page" as the copyright notice for easier identification within third-party archives. - Copyright [yyyy] [name of copyright owner] + Copyright [2019] [maplemei@aliyun.com] Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. diff --git a/README.en.md b/README.en.md index 80185e0..5a984d5 100644 --- a/README.en.md +++ b/README.en.md @@ -3,34 +3,3 @@ #### Description 基于Layui, 下拉选择框的多选解决方案 -#### Software Architecture -Software architecture description - -#### Installation - -1. xxxx -2. xxxx -3. xxxx - -#### Instructions - -1. xxxx -2. xxxx -3. xxxx - -#### Contribution - -1. Fork the repository -2. Create Feat_xxx branch -3. Commit your code -4. Create Pull Request - - -#### Gitee Feature - -1. You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md -2. Gitee blog [blog.gitee.com](https://blog.gitee.com) -3. Explore open source project [https://gitee.com/explore](https://gitee.com/explore) -4. The most valuable open source project [GVP](https://gitee.com/gvp) -5. The manual of Gitee [https://gitee.com/help](https://gitee.com/help) -6. The most popular members [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/) \ No newline at end of file diff --git a/README.md b/README.md index 0116cb1..0ad0312 100644 --- a/README.md +++ b/README.md @@ -4,34 +4,335 @@ 基于Layui, 下拉选择框的多选解决方案 #### 软件架构 -软件架构说明 - +1. 引入第三方[preact](https://preactjs.com/)库, 利用jsx渲染页面结构 +2. 使用[webpack](https://www.webpackjs.com/)进行打包 #### 安装教程 - -1. xxxx -2. xxxx -3. xxxx +``` +1. git clone https://gitee.com/maplemei/xm-select.git +2. cd xm-select +3. yarn 或者 npm install +``` #### 使用说明 -1. xxxx -2. xxxx -3. xxxx +> 历史版本 -#### 参与贡献 +[formSelectes](https://github.com/hnzzmsf/layui-formSelects) -1. Fork 本仓库 -2. 新建 Feat_xxx 分支 -3. 提交代码 -4. 新建 Pull Request +> 联系方式 + +QQ群: 769620939 + +> 默认配置项 + +``` +{ + //多选数据 + data: [], + //默认选中数据, 优先级大于selected + initValue: null, + //默认提示 + tips: '请选择', //please selected + //空数据提示 + empty: '暂无数据', //no data + //自定义属性名称 + prop: { + name: 'name', + value: 'value', + selected: 'selected', + disabled: 'disabled', + }, + //主题配置 + theme: { + color: '#009688', + }, + //模型 + model: { + label: { + type: 'block', + text: { + left: '', + right: '', + separator: ', ', + }, + block: { + showCount: 0, + showIcon: true, + }, + count: { + template(data, sels){ + return "已选中 " + sels.length + " 项, 共 " + data.length + " 项" + } + }, + }, + }, + // 展开下拉框, return false; 代表组件受控 + show(){ + + }, + // 隐藏下拉框, return false; 代表组件受控 + hidn(){ + + }, + // 模板组成, 当前option数据, 已经选中的数据, name, value + template(item, sels, name, value){ + return name; + } +} +``` + +> 默认方法 + +``` +//更新组件 +xmSelect: update(options) + +//重置组件 +xmSelect: reset() + +//重新渲染 +xmSelect: render(options) + +//主动关闭 +xmSelect: opened() + +//主动关闭 +xmSelect: closed() + +//获取已选中数据 +xmSelect: getValue() + +//设置选中数据, array: 选中数据, show: 是否展开下拉框 +xmSelect: setValue(array, show) +``` + +#### 示例 + +``` +

这是一个多选

+
+ +

这是一个国际版多选

+
+ +

有基础数据

+
+ +

有选中, 禁用的

+
+ +

自定义key

+
+ +

使用template自己构建选项1

+
+ +

使用template自己构建选项2

+
+ +

简单的展示形式1

+
+ +

简单的展示形式2

+
+ +

自定义展示

+
+ +

多余的用 +隐藏

+
+ +

不显示删除图标

+
+ +

换一个主题

+
-#### 码云特技 + + +``` diff --git a/dist/index.html b/dist/index.html new file mode 100644 index 0000000..6fb5186 --- /dev/null +++ b/dist/index.html @@ -0,0 +1 @@ +xm-select
\ No newline at end of file diff --git a/dist/xm-select.js b/dist/xm-select.js new file mode 100644 index 0000000..555527a --- /dev/null +++ b/dist/xm-select.js @@ -0,0 +1 @@ +!function(t){var e={};function n(o){if(e[o])return e[o].exports;var r=e[o]={i:o,l:!1,exports:{}};return t[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)n.d(o,r,function(e){return t[e]}.bind(null,r));return o},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=4)}([function(t){t.exports={a:"xm-select",b:"1.0.0"}},function(t,e,n){"use strict";t.exports=function(t){var e=[];return e.toString=function(){return this.map(function(e){var n=function(t,e){var n=t[1]||"",o=t[3];if(!o)return n;if(e&&"function"==typeof btoa){var r=(l=o,"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(l))))+" */"),i=o.sources.map(function(t){return"/*# sourceURL="+o.sourceRoot+t+" */"});return[n].concat(i).concat([r]).join("\n")}var l;return[n].join("\n")}(e,t);return e[2]?"@media "+e[2]+"{"+n+"}":n}).join("")},e.i=function(t,n){"string"==typeof t&&(t=[[null,t,""]]);for(var o={},r=0;r=0&&u.splice(e,1)}function h(t){var e=document.createElement("style");if(void 0===t.attrs.type&&(t.attrs.type="text/css"),void 0===t.attrs.nonce){var o=function(){0;return n.nc}();o&&(t.attrs.nonce=o)}return y(e,t.attrs),m(t,e),e}function y(t,e){Object.keys(e).forEach(function(n){t.setAttribute(n,e[n])})}function v(t,e){var n,o,r,i;if(e.transform&&t.css){if(!(i="function"==typeof e.transform?e.transform(t.css):e.transform.default(t.css)))return function(){};t.css=i}if(e.singleton){var l=c++;n=s||(s=h(e)),o=g.bind(null,n,l,!1),r=g.bind(null,n,l,!0)}else t.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(n=function(t){var e=document.createElement("link");return void 0===t.attrs.type&&(t.attrs.type="text/css"),t.attrs.rel="stylesheet",y(e,t.attrs),m(t,e),e}(e),o=function(t,e,n){var o=n.css,r=n.sourceMap,i=void 0===e.convertToAbsoluteUrls&&r;(e.convertToAbsoluteUrls||i)&&(o=p(o));r&&(o+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */");var l=new Blob([o],{type:"text/css"}),a=t.href;t.href=URL.createObjectURL(l),a&&URL.revokeObjectURL(a)}.bind(null,n,e),r=function(){b(n),n.href&&URL.revokeObjectURL(n.href)}):(n=h(e),o=function(t,e){var n=e.css,o=e.media;o&&t.setAttribute("media",o);if(t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}.bind(null,n),r=function(){b(n)});return o(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap)return;o(t=e)}else r()}}t.exports=function(t,e){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");(e=e||{}).attrs="object"==typeof e.attrs?e.attrs:{},e.singleton||"boolean"==typeof e.singleton||(e.singleton=l()),e.insertInto||(e.insertInto="head"),e.insertAt||(e.insertAt="bottom");var n=d(t,e);return f(n,e),function(t){for(var o=[],r=0;r2;)l.push(c[s]);for(e&&null!=e.children&&(l.length||l.push(e.children),delete e.children);l.length;)if((o=l.pop())&&void 0!==o.pop)for(s=o.length;s--;)l.push(o[s]);else"boolean"==typeof o&&(o=null),(i="function"!=typeof t)&&(null==o?o="":"number"==typeof o?o=String(o):"string"!=typeof o&&(i=!1)),i&&n?u[u.length-1]+=o:u===a?u=[o]:u.push(o),n=i;var p=new r;return p.nodeName=t,p.children=u,p.attributes=null==e?void 0:e,p.key=null==e?void 0:e.key,p}function c(t,e){for(var n in e)t[n]=e[n];return t}function u(t,e){null!=t&&("function"==typeof t?t(e):t.current=e)}var p="function"==typeof Promise?Promise.resolve().then.bind(Promise.resolve()):setTimeout,f=/acit|ex(?:s|g|n|p|$)|rph|ows|mnc|ntw|ine[ch]|zoo|^ord/i,d=[];function m(t){!t._dirty&&(t._dirty=!0)&&1==d.push(t)&&p(b)}function b(){for(var t;t=d.pop();)t._dirty&&U(t)}function h(t,e){return t.normalizedNodeName===e||t.nodeName.toLowerCase()===e.toLowerCase()}function y(t){var e=c({},t.attributes);e.children=t.children;var n=t.nodeName.defaultProps;if(void 0!==n)for(var o in n)void 0===e[o]&&(e[o]=n[o]);return e}function v(t){var e=t.parentNode;e&&e.removeChild(t)}function x(t,e,n,r,i){if("className"===e&&(e="class"),"key"===e);else if("ref"===e)u(n,null),u(r,t);else if("class"!==e||i)if("style"===e){if(r&&"string"!=typeof r&&"string"!=typeof n||(t.style.cssText=r||""),r&&"object"==o(r)){if("string"!=typeof n)for(var l in n)l in r||(t.style[l]="");for(var l in r)t.style[l]="number"==typeof r[l]&&!1===f.test(l)?r[l]+"px":r[l]}}else if("dangerouslySetInnerHTML"===e)r&&(t.innerHTML=r.__html||"");else if("o"==e[0]&&"n"==e[1]){var a=e!==(e=e.replace(/Capture$/,""));e=e.toLowerCase().substring(2),r?n||t.addEventListener(e,A,a):t.removeEventListener(e,A,a),(t._listeners||(t._listeners={}))[e]=r}else if("list"!==e&&"type"!==e&&!i&&e in t){try{t[e]=null==r?"":r}catch(t){}null!=r&&!1!==r||"spellcheck"==e||t.removeAttribute(e)}else{var s=i&&e!==(e=e.replace(/^xlink:?/,""));null==r||!1===r?s?t.removeAttributeNS("http://www.w3.org/1999/xlink",e.toLowerCase()):t.removeAttribute(e):"function"!=typeof r&&(s?t.setAttributeNS("http://www.w3.org/1999/xlink",e.toLowerCase(),r):t.setAttribute(e,r))}else t.className=r||""}function A(t){return this._listeners[t.type](t)}var g=[],w=0,C=!1,k=!1;function S(){for(var t;t=g.shift();)t.componentDidMount&&t.componentDidMount()}function O(t,e,n,o,r,i){w++||(C=null!=r&&void 0!==r.ownerSVGElement,k=null!=t&&!("__preactattr_"in t));var l=function t(e,n,o,r,i){var l=e,a=C;if(null!=n&&"boolean"!=typeof n||(n=""),"string"==typeof n||"number"==typeof n)return e&&void 0!==e.splitText&&e.parentNode&&(!e._component||i)?e.nodeValue!=n&&(e.nodeValue=n):(l=document.createTextNode(n),e&&(e.parentNode&&e.parentNode.replaceChild(l,e),j(e,!0))),l.__preactattr_=!0,l;var s,c,u=n.nodeName;if("function"==typeof u)return function(t,e,n,o){for(var r=t&&t._component,i=r,l=t,a=r&&t._componentConstructor===e.nodeName,s=a,c=y(e);r&&!s&&(r=r._parentComponent);)s=r.constructor===e.nodeName;return r&&s&&(!o||r._component)?(R(r,c,3,n,o),t=r.base):(i&&!a&&(M(i),t=l=null),r=B(e.nodeName,c,n),t&&!r.nextBase&&(r.nextBase=t,l=null),R(r,c,1,n,o),t=r.base,l&&t!==l&&(l._component=null,j(l,!1))),t}(e,n,o,r);if(C="svg"===u||"foreignObject"!==u&&C,u=String(u),(!e||!h(e,u))&&(s=u,(c=C?document.createElementNS("http://www.w3.org/2000/svg",s):document.createElement(s)).normalizedNodeName=s,l=c,e)){for(;e.firstChild;)l.appendChild(e.firstChild);e.parentNode&&e.parentNode.replaceChild(l,e),j(e,!0)}var p=l.firstChild,f=l.__preactattr_,d=n.children;if(null==f){f=l.__preactattr_={};for(var m=l.attributes,b=m.length;b--;)f[m[b].name]=m[b].value}return!k&&d&&1===d.length&&"string"==typeof d[0]&&null!=p&&void 0!==p.splitText&&null==p.nextSibling?p.nodeValue!=d[0]&&(p.nodeValue=d[0]):(d&&d.length||null!=p)&&function(e,n,o,r,i){var l,a,s,c,u,p,f,d,m=e.childNodes,b=[],y={},x=0,A=0,g=m.length,w=0,C=n?n.length:0;if(0!==g)for(var k=0;k"===e?(a(),o=1):o&&("="===e?(o=4,n=r,r=""):"/"===e?(a(),3===o&&(l=l[0]),o=l,(l=l[0]).push(o,4),o=0):" "===e||"\t"===e||"\n"===e||"\r"===e?(a(),o=2):r+=e)}return a(),l},L="function"==typeof Map,F=L?new Map:{},D=L?function(t){var e=F.get(t);return e||F.set(t,e=T(t)),e}:function(t){for(var e="",n=0;n1?e:e[0]}).bind(s);function J(t){return(J="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function I(t,e){for(var n=0;n0&&void 0!==arguments[0]?arguments[0]:"zn",e=mt[t]||dt;return{data:[],initValue:null,tips:e.tips,empty:e.empty,reset:!1,isShow:!1,prop:{name:"name",value:"value",selected:"selected",disabled:"disabled"},theme:{color:"#009688"},model:{label:{type:"block",text:{left:"",right:"",separator:", "},block:{showCount:0,showIcon:!0},count:{template:function(t,e){return"已选中 ".concat(e.length," 项, 共 ").concat(t.length," 项")}}}},show:function(){},hidn:function(){},template:function(t,e,n,o){return n}}};function ht(){return(ht=Object.assign||function(t){for(var e=1;e0&&void 0!==arguments[0]?arguments[0]:{};this.options=yt({},this.options,e);var n,o=(n=this.options.el,document.querySelector(n));if(o){var r,i,l;return r=s(pt,ht({},this.options,{onClose:Ct,onRef:function(e){return kt[t.options.el]=e}})),l=i=o,O(i.firstElementChild,r,{},!1,l,!1),wt[this.options.el]=this,this}ft("没有找到渲染对象: ".concat(e.el,", 请检查"))}},{key:"reset",value:function(){var t=this.options;return this.options=bt(t.language),this.update(yt({},gt[t.el])),kt[this.options.el].reset(),this}},{key:"opened",value:function(){var t=kt[this.options.el];return!t.state.show&&t.onClick(),this}},{key:"closed",value:function(){var t=kt[this.options.el];return t.state.show&&t.onClick(),this}},{key:"getValue",value:function(){return t=kt[this.options.el].state.sels,JSON.parse(JSON.stringify(t));var t}},{key:"setValue",value:function(t,e){var n;if(n=t,"[object Array]"==Object.prototype.toString.call(n))return kt[this.options.el].value(t,!!e),this;ft("请传入数组结构...")}}])&&xt(e.prototype,n),o&&xt(e,o),t}();e.a=St},function(t,e,n){"use strict";n.r(e),function(t){var e=n(0),o=n(3),r=(n(6),n(9),{name:e.a,version:e.b,render:function(t){return new o.a(t)}});"object"===("undefined"==typeof exports?"undefined":_typeof(exports))?t.exports=r:"function"==typeof define&&n(11)?define(r):window.layui&&layui.define?layui.define(function(t){t("xmSelect",r)}):window.xmSelect=r}.call(this,n(5)(t))},function(t,e){t.exports=function(t){if(!t.webpackPolyfill){var e=Object.create(t);e.children||(e.children=[]),Object.defineProperty(e,"loaded",{enumerable:!0,get:function(){return e.l}}),Object.defineProperty(e,"id",{enumerable:!0,get:function(){return e.i}}),Object.defineProperty(e,"exports",{enumerable:!0}),e.webpackPolyfill=1}return e}},function(t,e,n){var o=n(7);"string"==typeof o&&(o=[[t.i,o,""]]);var r={hmr:!0,transform:void 0,insertInto:void 0};n(2)(o,r);o.locals&&(t.exports=o.locals)},function(t,e,n){(t.exports=n(1)(!1)).push([t.i,"@-webkit-keyframes xm-upbit {\n from {\n -webkit-transform: translate3d(0, 30px, 0);\n opacity: 0.3;\n }\n to {\n -webkit-transform: translate3d(0, 0, 0);\n opacity: 1;\n }\n}\n@keyframes xm-upbit {\n from {\n transform: translate3d(0, 30px, 0);\n opacity: 0.3;\n }\n to {\n transform: translate3d(0, 0, 0);\n opacity: 1;\n }\n}\nxm-select {\n position: relative;\n border: 1px solid #E6E6E6;\n border-radius: 2px;\n height: 36px;\n line-height: 36px;\n display: block;\n width: 100%;\n cursor: pointer;\n}\nxm-select * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-size: 14px;\n font-weight: 400;\n color: #666;\n text-overflow: ellipsis;\n user-select: none;\n}\nxm-select:hover {\n border-color: #C0C4CC;\n}\nxm-select > .xm-tips {\n color: #999999;\n padding: 0 10px;\n height: 100%;\n}\nxm-select > .xm-icon {\n display: inline-block;\n overflow: hidden;\n position: absolute;\n width: 0;\n height: 0;\n right: 10px;\n top: 50%;\n margin-top: -3px;\n cursor: pointer;\n border: 6px dashed transparent;\n border-top-color: #C2C2C2;\n border-top-style: solid;\n transition: all 0.3s;\n -webkit-transition: all 0.3s;\n}\nxm-select > .xm-icon-expand {\n margin-top: -9px;\n transform: rotate(180deg);\n}\nxm-select > .xm-label {\n padding: 0 10px;\n height: 100%;\n overflow-y: hidden;\n}\nxm-select > .xm-label .xm-label-block {\n display: inline-block;\n position: relative;\n padding: 0px 5px;\n margin: 2px 5px 2px 0;\n height: 22px;\n line-height: 22px;\n border-radius: 3px;\n vertical-align: middle;\n color: #FFF;\n max-width: calc(100% - 20px);\n}\nxm-select > .xm-label .xm-label-block > span {\n display: inline-block;\n color: #FFF;\n text-overflow: ellipsis;\n overflow: hidden;\n}\nxm-select > .xm-label .xm-label-block > i {\n color: #FFF;\n margin-left: 8px;\n font-size: 12px;\n cursor: pointer;\n line-height: 20px;\n position: relative;\n top: -6px;\n}\nxm-select > .xm-label .xm-label-block.disabled {\n background-color: #C2C2C2 !important;\n cursor: no-drop !important;\n}\nxm-select > .xm-label .xm-label-block.disabled > i {\n cursor: no-drop !important;\n}\nxm-select > .xm-body {\n position: absolute;\n left: 0;\n top: 42px;\n padding: 5px 0;\n z-index: 999;\n width: 100%;\n border: 1px solid #E6E6E6;\n max-height: 300px;\n overflow-y: auto;\n background-color: #fff;\n border-radius: 2px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);\n animation-name: xm-upbit;\n animation-duration: 0.3s;\n animation-fill-mode: both;\n}\nxm-select > .xm-body .xm-option {\n position: relative;\n padding: 0 10px;\n cursor: pointer;\n}\nxm-select > .xm-body .xm-option:hover {\n background-color: #f2f2f2;\n}\nxm-select > .xm-body .xm-option:hover > .xm-option-icon > i {\n color: #f2f2f2;\n}\nxm-select > .xm-body .xm-option-icon {\n color: #FFF;\n font-size: 16px;\n width: 18px;\n height: 18px;\n position: absolute;\n top: 9px;\n border: 1px solid #E6E6E6;\n border-radius: 5px;\n z-index: 2;\n}\nxm-select > .xm-body .xm-option-icon > i {\n position: absolute;\n right: 0px;\n top: -10px;\n color: #FFF;\n}\nxm-select > .xm-body .xm-option-content {\n display: inline-block;\n position: relative;\n padding: 0 15px 0 30px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n color: #666;\n line-height: 36px;\n vertical-align: top;\n width: 100%;\n}\nxm-select > .xm-body .xm-select-empty {\n text-align: center;\n color: #999;\n}\nxm-select > .xm-body .disabled {\n cursor: no-drop;\n}\nxm-select > .xm-body .disabled:hover {\n background-color: #FFF;\n}\nxm-select > .xm-body .disabled:hover > .xm-option-icon > i {\n color: #FFF !important;\n}\nxm-select > .xm-body .disabled .xm-option-icon {\n border-color: #C2C2C2 !important;\n}\nxm-select > .xm-body .disabled .xm-option-content {\n color: #C2C2C2 !important;\n}\nxm-select > .xm-body .disabled.selected > .xm-option-icon > i {\n color: #C2C2C2 !important;\n}\nxm-select .dis {\n display: none;\n}\n",""])},function(t,e){t.exports=function(t){var e="undefined"!=typeof window&&window.location;if(!e)throw new Error("fixUrls requires window.location");if(!t||"string"!=typeof t)return t;var n=e.protocol+"//"+e.host,o=n+e.pathname.replace(/\/[^\/]*$/,"/");return t.replace(/url\s*\(((?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)\)/gi,function(t,e){var r,i=e.trim().replace(/^"(.*)"$/,function(t,e){return e}).replace(/^'(.*)'$/,function(t,e){return e});return/^(#|data:|http:\/\/|https:\/\/|file:\/\/\/|\s*$)/i.test(i)?t:(r=0===i.indexOf("//")?i:0===i.indexOf("/")?n+i:o+i.replace(/^\.\//,""),"url("+JSON.stringify(r)+")")})}},function(t,e,n){var o=n(10);"string"==typeof o&&(o=[[t.i,o,""]]);var r={hmr:!0,transform:void 0,insertInto:void 0};n(2)(o,r);o.locals&&(t.exports=o.locals)},function(t,e,n){(t.exports=n(1)(!1)).push([t.i,'/* 阿里巴巴矢量图标库 */\n@font-face {\n font-family: "xm-iconfont";\n src: url(\'//at.alicdn.com/t/font_792691_qxv28s6g1l9.eot?t=1534240067831\');\n /* IE9*/\n src: url(\'//at.alicdn.com/t/font_792691_qxv28s6g1l9.eot?t=1534240067831#iefix\') format(\'embedded-opentype\'), /* IE6-IE8 */ url(\'data:application/x-font-woff;charset=utf-8;base64,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\') format(\'woff\'), url(\'//at.alicdn.com/t/font_792691_qxv28s6g1l9.ttf?t=1534240067831\') format(\'truetype\'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url(\'//at.alicdn.com/t/font_792691_qxv28s6g1l9.svg?t=1534240067831#iconfont\') format(\'svg\');\n /* iOS 4.1- */\n}\n.xm-iconfont {\n font-family: "xm-iconfont" !important;\n font-size: 16px;\n font-style: normal;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n.icon-quanxuan:before {\n content: "\\e62c";\n}\n.icon-caidan:before {\n content: "\\e610";\n}\n.icon-fanxuan:before {\n content: "\\e837";\n}\n.icon-pifu:before {\n content: "\\e668";\n}\n.icon-qingkong:before {\n content: "\\e63e";\n}\n.icon-sousuo:before {\n content: "\\e600";\n}\n.icon-danx:before {\n content: "\\e62b";\n}\n.icon-duox:before {\n content: "\\e613";\n}\n.icon-close:before {\n content: "\\e601";\n}\n.icon-expand:before {\n content: "\\e641";\n}\n',""])},function(t,e){(function(e){t.exports=e}).call(this,{})}]); \ No newline at end of file diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 0000000..cbdbf60 --- /dev/null +++ b/docs/index.html @@ -0,0 +1,240 @@ + + + + + + + + + + +

这是一个多选

+
+ +

这是一个国际版多选

+
+ +

有基础数据

+
+ +

有选中, 禁用的

+
+ +

自定义key

+
+ +

使用template自己构建选项1

+
+ +

使用template自己构建选项2

+
+ +

简单的展示形式1

+
+ +

简单的展示形式2

+
+ +

自定义展示

+
+ +

多余的用 +隐藏

+
+ +

不显示删除图标

+
+ +

换一个主题

+
+ + + + + + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..1dbe8b8 --- /dev/null +++ b/package.json @@ -0,0 +1,28 @@ +{ + "name": "xm-select", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "dev": "node_modules/.bin/webpack-dev-server", + "build": "webpack" + }, + "author": "", + "license": "ISC", + "dependencies": { + "@babel/core": "^7.4.0", + "@babel/preset-env": "^7.4.2", + "babel-loader": "^8.0.5", + "babel-plugin-transform-react-jsx": "^6.24.1", + "css-loader": "^2.1.1", + "less": "^3.9.0", + "less-loader": "^4.1.0", + "style-loader": "^0.23.1", + "webpack": "^4.29.6", + "webpack-cli": "^3.3.0", + "webpack-dev-server": "^3.2.1" + }, + "devDependencies": { + "html-webpack-plugin": "^3.2.0" + } +} diff --git a/src/components/common/util.js b/src/components/common/util.js new file mode 100644 index 0000000..cf2c6a4 --- /dev/null +++ b/src/components/common/util.js @@ -0,0 +1,59 @@ +/** + * 选中dom元素 + */ +export function selector(el) { + return document.querySelector(el); +} + +/** + * 警告提示 + */ +export function warn() { + let arr = []; + for (var i = 0; i < arguments.length; i++) { + arr.push(`${i + 1}. ${arguments[i]}`); + } + console.warn(arr.join('\n')); +} + +/** + * 全局监听点击事件 + */ +export function listenerClose(data, handler){ + window.addEventListener('click', (e) => handler(e)); +} + +/** + * 安全拷贝数据 + */ +export function safety(data){ + return JSON.parse(JSON.stringify(data)); +} + +/** + * 检测对象是否为数组 + */ +export function isArray(obj){ + return Object.prototype.toString.call(obj) == "[object Array]"; +} + +export function watch(data) { + return new Promise((resolve, reject) => { + for (let key in data) { + let value = data[key]; + Object.defineProperty(data, key, { + configurable: false, // 该状态下的属性描述符不能被修改和删除 + enumerable: false, // 该状态下的属性描述符中的属性不可被枚举 + get() { + return value; + }, + set(newVal) { + if (newVal !== value) { + resolve(key, newVal, value); + value = newVal; + } + } + }); + } + }); +} diff --git a/src/components/config/language/en.js b/src/components/config/language/en.js new file mode 100644 index 0000000..7b832f9 --- /dev/null +++ b/src/components/config/language/en.js @@ -0,0 +1,4 @@ +export default { + tips: 'please selected', + empty: 'no data', +} \ No newline at end of file diff --git a/src/components/config/language/zn.js b/src/components/config/language/zn.js new file mode 100644 index 0000000..28fa3ea --- /dev/null +++ b/src/components/config/language/zn.js @@ -0,0 +1,4 @@ +export default { + tips: '请选择', + empty: '暂无数据', +} \ No newline at end of file diff --git a/src/components/config/options.js b/src/components/config/options.js new file mode 100644 index 0000000..00c1b75 --- /dev/null +++ b/src/components/config/options.js @@ -0,0 +1,67 @@ +import zn from './language/zn' +import en from './language/en' + +const lanSetting = { zn, en } + +export default function (lan = 'zn') { + let setting = lanSetting[lan] || zn; + + return { + //多选数据 + data: [], + //默认选中数据, 优先级大于selected + initValue: null, + //默认提示 + tips: setting.tips, + //空数据提示 + empty: setting.empty, + //是否重置多选 + reset: false, + //用来判断多选是否显示 + isShow: false, + //自定义属性名称 + prop: { + name: 'name', + value: 'value', + selected: 'selected', + disabled: 'disabled', + }, + //主题配置 + theme: { + color: '#009688', + }, + //模型 + model: { + label: { + type: 'block', + text: { + left: '', + right: '', + separator: ', ', + }, + block: { + showCount: 0, + showIcon: true, + }, + count: { + template(data, sels){ + return `已选中 ${sels.length} 项, 共 ${data.length} 项` + } + }, + }, + }, + + // 展开下拉框 + show(){ + + }, + // 隐藏下拉框 + hidn(){ + + }, + // 模板组成, 当前option数据, 已经选中的数据, name, value + template(item, sels, name, value){ + return name; + } + } +} \ No newline at end of file diff --git a/src/components/core/index.js b/src/components/core/index.js new file mode 100644 index 0000000..2745188 --- /dev/null +++ b/src/components/core/index.js @@ -0,0 +1,113 @@ +import { h, Component, render } from '@/components/preact' +import Framework from '@/components/element/framework' +import { selector, warn, listenerClose, watch, safety, isArray } from '@/components/common/util' +import defaultOptions from '@/components/config/options' + + + +/** + * 保留初始化的数据 + */ +const initData = {}; +const data = {}; +const onClose = (el) => Object.keys(data).filter(a => a != el).forEach(el => data[el].closed()); +listenerClose(data, onClose); + +/** + * 子组件集合 + */ +const childs = {}; + + +/** + * 对外提供的处理方法 + */ +class xmOptions { + + constructor(options) { + //保留初始化时的数据 + initData[options.el] = options; + //定义默认值 + this.options = defaultOptions(options.language); + //开始渲染数据 + this.update(options); + } + + /** + * 更新数据 + 重新渲染 + */ + update(options = {}){ + //记录最新的配置项 + this.options = {...this.options, ...options}; + + //如果dom不存在, 则不进行渲染事项 + let dom = selector(this.options.el); + if(!dom){ + warn(`没有找到渲染对象: ${options.el}, 请检查`) + return ; + } + const onRef = (ref) => childs[this.options.el] = ref; + + render(, dom); + + //记录数据 + data[this.options.el] = this; + //返回多选对象 + return this; + } + + /** + * 重置多选, 回到初始化的状态 + */ + reset(){ + let initVal = this.options; + //设置options的默认数据 + this.options = defaultOptions(initVal.language); + //更新渲染 + this.update({ ...initData[initVal.el]}); + //子组件初始化 + childs[this.options.el].reset(); + return this; + } + + /** + * 主动打开多选 + */ + opened(){ + let ref = childs[this.options.el]; + !ref.state.show && ref.onClick(); + return this; + } + + /** + * 主动关闭多选 + */ + closed(){ + let ref = childs[this.options.el]; + ref.state.show && ref.onClick(); + return this; + } + + /** + * 获取多选选中的数据 + */ + getValue(){ + return safety(childs[this.options.el].state.sels); + } + + /** + * 设置多选数据 + */ + setValue(sels, show){ + if(!isArray(sels)){ + warn('请传入数组结构...') + return ; + } + childs[this.options.el].value(sels, !!show); + return this; + } + + +} + +export default xmOptions; \ No newline at end of file diff --git a/src/components/element/framework.js b/src/components/element/framework.js new file mode 100644 index 0000000..034c618 --- /dev/null +++ b/src/components/element/framework.js @@ -0,0 +1,114 @@ +import { h, Component, render } from '@/components/preact' + +//渲染类 +import Tips from './tips'; +import Label from './label'; +import General from './model/general'; + +/** + * 框架渲染类, 渲染基础的外边框 + 属性变化监听 + */ +class Framework extends Component{ + + constructor(options){ + super(options); + //初始化多选数据 + this.reset(); + //回传子组件 + this.props.onRef(this); + } + + reset(){ + let selected = this.props.prop.selected; + this.value(this.props.initValue ? this.props.initValue : this.props.data.filter(item => item[selected]), false); + } + + value(sels, show){ + let data = this.props.data; + let value = this.props.prop.value; + this.setState({ + sels: sels.map(sel => typeof sel === 'object' ? sel[value] : sel).map(val => data.find(item => item[value] == val)).filter(a => a), + //下拉框是否展开 + show + }) + } + + onClick(e){ + let show = !this.state.show; + + if(show){ + if(this.props.show && this.props.show() == false){ + return; + } + //事件互斥原则, 打开一个多选, 关闭其他所有多选 + this.props.onClose(this.props.el); + }else{ + if(this.props.hidn && this.props.hidn() == false){ + return; + } + } + + this.setState({ show }) + //阻止其他绑定事件的冒泡 + e && e.stopPropagation(); + } + + componentWillReceiveProps(props){ + + } + + render({ tips, theme, data, prop, template, model, empty }, { sels, show }) { + const borderStyle = { borderColor: theme.color }; + //最外层边框的属性 + const xmSelectProps = { + style: show ? borderStyle : '', + onClick: this.onClick.bind(this) + } + //右边下拉箭头的变化class + const iconClass = show ? 'xm-icon xm-icon-expand' : 'xm-icon'; + //提示信息的属性 + const tipsProps = { + tips, + //没有已选择数据, 则显示提示 + show: !sels.length + } + //普通多选数据 + const valueProp = prop.value; + + const ck = (item, selected, disabled) => { + //如果是禁用状态, 不能进行操作 + if(disabled) return; + + //如果现在是选中状态 + if(selected){ + let index = sels.findIndex(sel => sel[valueProp] == item[valueProp]) + if(index != -1){ + sels.splice(index, 1); + this.setState(sels); + } + }else{ + this.setState({ + sels: [...sels, item] + }) + } + }; + + const labelProps = { data, prop, model, theme, sels, ck, title: sels.map(sel => sel[prop.name]).join(',') } + const bodyProps = { data, prop, template, theme, sels, ck, empty } + //控制下拉框的显示于隐藏 + const bodyClass = show ? 'xm-body' : 'xm-body dis'; + + return ( + + + + + ); + } +} + +export default Framework; \ No newline at end of file diff --git a/src/components/element/header.js b/src/components/element/header.js new file mode 100644 index 0000000..e69de29 diff --git a/src/components/element/label.js b/src/components/element/label.js new file mode 100644 index 0000000..4f17fb2 --- /dev/null +++ b/src/components/element/label.js @@ -0,0 +1,76 @@ +import { h, Component, render } from '@/components/preact' + +/** + * 标签的渲染 + */ +class Label extends Component{ + + constructor(options){ + super(options); + } + + iconClick(item, selected, disabled, e){ + this.props.ck(item, selected, disabled); + //阻止父组件上的事件冒泡 + e.stopPropagation(); + } + + render({ data, prop, theme, model, sels }) { + //获取变换属性 + const { name, disabled } = prop; + + //获取配置项 + const label = model.label; + const type = label.type; + const conf = label[type]; + + //渲染结果 + let html = ''; + + if(type === 'text'){ + html = sels.map(sel => `${conf.left}${sel[name]}${conf.right}`).join(conf.separator) + }else if(type === 'block'){ + //已选择的数据 + let arr = [...sels]; + + const style = { backgroundColor: theme.color } + //显示的个数 + const count = conf.showCount <= 0 ? arr.length : conf.showCount; + + html = arr.splice(0, count).map(sel => { + const styleProps = { width: conf.showIcon ? 'calc(100% - 20px)' : '100%', } + const className = ['xm-label-block', sel[disabled] ? 'disabled':''].join(' '); + return ( +
+ { sel[name] } + { conf.showIcon && } +
+ ) + }) + + //剩余没显示的数据 + if(arr.length){ + html.push( +
+ + { arr.length } +
+ ) + } + }else{ + if(sels.length && conf && conf.template){ + html = conf.template(data, sels); + }else{ + html = sels.map(sel => sel[name]).join(',') + } + } + + + return ( +
+ { html } +
+ ) + } +} + +export default Label; \ No newline at end of file diff --git a/src/components/element/model/general.js b/src/components/element/model/general.js new file mode 100644 index 0000000..879961a --- /dev/null +++ b/src/components/element/model/general.js @@ -0,0 +1,51 @@ +import { h, Component, render } from '@/components/preact' + +/** + * 普通的多选渲染 + */ +class General extends Component{ + + constructor(options){ + super(options); + } + + optionClick(item, selected, disabled, e){ + this.props.ck(item, selected, disabled); + //阻止父组件上的事件冒泡 + e.stopPropagation(); + } + + render({ data, prop, template, theme, sels, empty }) { + + const { name, value, disabled } = prop; + + const arr = data.map(item => { + + const selected = !!sels.find(sel => sel[value] == item[value]) + const iconStyle = { color: selected ? theme.color : '' } + // const className = 'xm-option' + (item.disabled ? ' disabled' : ''); + const className = ['xm-option', (item[disabled] ? ' disabled' : ''), (selected ? ' selected' : '')].join(' '); + + return ( +
+
+ +
+
+
+ ) + }) + + if(!data.length){ + arr.push( +
{ empty }
+ ) + } + + return ( +
{ arr }
+ ) + } +} + +export default General; \ No newline at end of file diff --git a/src/components/element/tips.js b/src/components/element/tips.js new file mode 100644 index 0000000..2dfe518 --- /dev/null +++ b/src/components/element/tips.js @@ -0,0 +1,20 @@ +import { h, Component, render } from '@/components/preact' + +/** + * 默认提示 + */ +class Tips extends Component{ + + constructor(options){ + super(options); + } + + render({ tips, show }) { + const tipsClass = show ? 'xm-tips' : 'xm-tips dis'; + return ( +
{ tips }
+ ) + } +} + +export default Tips; \ No newline at end of file diff --git a/src/components/preact/index.js b/src/components/preact/index.js new file mode 100644 index 0000000..392716d --- /dev/null +++ b/src/components/preact/index.js @@ -0,0 +1,311 @@ +var e = function() {}, + t = {}, + n = [], + o = []; + +function r(t, r) { + var i, l, a, s, p = arguments, + u = o; + for (s = arguments.length; s-- > 2;) n.push(p[s]); + for (r && null != r.children && (n.length || n.push(r.children), delete r.children); n.length;) + if ((l = n.pop()) && void 0 !== l.pop) + for (s = l.length; s--;) n.push(l[s]); + else "boolean" == typeof l && (l = null), (a = "function" != typeof t) && (null == l ? l = "" : "number" == typeof l ? + l = String(l) : "string" != typeof l && (a = !1)), a && i ? u[u.length - 1] += l : u === o ? u = [l] : u.push(l), i = + a; + var c = new e; + return c.nodeName = t, c.children = u, c.attributes = null == r ? void 0 : r, c.key = null == r ? void 0 : r.key, c +} + +function i(e, t) { + for (var n in t) e[n] = t[n]; + return e +} + +function l(e, t) { + null != e && ("function" == typeof e ? e(t) : e.current = t) +} +var a = "function" == typeof Promise ? Promise.resolve().then.bind(Promise.resolve()) : setTimeout, + s = /acit|ex(?:s|g|n|p|$)|rph|ows|mnc|ntw|ine[ch]|zoo|^ord/i, + p = []; + +function u(e) { + !e._dirty && (e._dirty = !0) && 1 == p.push(e) && a(c) +} + +function c() { + for (var e; e = p.pop();) e._dirty && U(e) +} + +function f(e, t) { + return e.normalizedNodeName === t || e.nodeName.toLowerCase() === t.toLowerCase() +} + +function d(e) { + var t = i({}, e.attributes); + t.children = e.children; + var n = e.nodeName.defaultProps; + if (void 0 !== n) + for (var o in n) void 0 === t[o] && (t[o] = n[o]); + return t +} + +function v(e) { + var t = e.parentNode; + t && t.removeChild(e) +} + +function h(e, t, n, o, r) { + if ("className" === t && (t = "class"), "key" === t); + else if ("ref" === t) l(n, null), l(o, e); + else if ("class" !== t || r) + if ("style" === t) { + if (o && "string" != typeof o && "string" != typeof n || (e.style.cssText = o || ""), o && "object" == typeof o) { + if ("string" != typeof n) + for (var i in n) i in o || (e.style[i] = ""); + for (var i in o) e.style[i] = "number" == typeof o[i] && !1 === s.test(i) ? o[i] + "px" : o[i] + } + } else if ("dangerouslySetInnerHTML" === t) o && (e.innerHTML = o.__html || ""); + else if ("o" == t[0] && "n" == t[1]) { + var a = t !== (t = t.replace(/Capture$/, "")); + t = t.toLowerCase().substring(2), o ? n || e.addEventListener(t, m, a) : e.removeEventListener(t, m, a), (e._listeners || + (e._listeners = {}))[t] = o + } else if ("list" !== t && "type" !== t && !r && t in e) { + try { + e[t] = null == o ? "" : o + } catch (e) {} + null != o && !1 !== o || "spellcheck" == t || e.removeAttribute(t) + } else { + var p = r && t !== (t = t.replace(/^xlink:?/, "")); + null == o || !1 === o ? p ? e.removeAttributeNS("http://www.w3.org/1999/xlink", t.toLowerCase()) : e.removeAttribute( + t) : "function" != typeof o && (p ? e.setAttributeNS("http://www.w3.org/1999/xlink", t.toLowerCase(), o) : e.setAttribute( + t, o)) + } else e.className = o || "" +} + +function m(e) { + return this._listeners[e.type](e) +} +var _ = [], + y = 0, + g = !1, + b = !1; + +function C() { + for (var e; e = _.shift();) e.componentDidMount && e.componentDidMount() +} + +function x(e, t, n, o, r, i) { + y++ || (g = null != r && void 0 !== r.ownerSVGElement, b = null != e && !("__preactattr_" in e)); + var l = function e(t, n, o, r, i) { + var l = t, + a = g; + if (null != n && "boolean" != typeof n || (n = ""), "string" == typeof n || "number" == typeof n) return t && void 0 !== + t.splitText && t.parentNode && (!t._component || i) ? t.nodeValue != n && (t.nodeValue = n) : (l = document.createTextNode( + n), t && (t.parentNode && t.parentNode.replaceChild(l, t), N(t, !0))), l.__preactattr_ = !0, l; + var s, p, u = n.nodeName; + if ("function" == typeof u) return function(e, t, n, o) { + for (var r = e && e._component, i = r, l = e, a = r && e._componentConstructor === t.nodeName, s = a, p = d(t); r && + !s && (r = r._parentComponent);) s = r.constructor === t.nodeName; + return r && s && (!o || r._component) ? (B(r, p, 3, n, o), e = r.base) : (i && !a && (L(i), e = l = null), r = S( + t.nodeName, p, n), e && !r.nextBase && (r.nextBase = e, l = null), B(r, p, 1, n, o), e = r.base, l && e !== l && + (l._component = null, N(l, !1))), e + }(t, n, o, r); + if (g = "svg" === u || "foreignObject" !== u && g, u = String(u), (!t || !f(t, u)) && (s = u, (p = g ? document.createElementNS( + "http://www.w3.org/2000/svg", s) : document.createElement(s)).normalizedNodeName = s, l = p, t)) { + for (; t.firstChild;) l.appendChild(t.firstChild); + t.parentNode && t.parentNode.replaceChild(l, t), N(t, !0) + } + var c = l.firstChild, + m = l.__preactattr_, + _ = n.children; + if (null == m) { + m = l.__preactattr_ = {}; + for (var y = l.attributes, C = y.length; C--;) m[y[C].name] = y[C].value + } + return !b && _ && 1 === _.length && "string" == typeof _[0] && null != c && void 0 !== c.splitText && null == c.nextSibling ? + c.nodeValue != _[0] && (c.nodeValue = _[0]) : (_ && _.length || null != c) && function(t, n, o, r, i) { + var l, a, s, p, u, c, d, h, m = t.childNodes, + _ = [], + y = {}, + g = 0, + b = 0, + C = m.length, + x = 0, + w = n ? n.length : 0; + if (0 !== C) + for (var k = 0; k < C; k++) { + var S = m[k], + P = S.__preactattr_; + null != (B = w && P ? S._component ? S._component.__key : P.key : null) ? (g++, y[B] = S) : (P || (void 0 !== S.splitText ? + !i || S.nodeValue.trim() : i)) && (_[x++] = S) + } + if (0 !== w) + for (k = 0; k < w; k++) { + var B; + if (u = null, null != (B = (p = n[k]).key)) g && void 0 !== y[B] && (u = y[B], y[B] = void 0, g--); + else if (b < x) + for (l = b; l < x; l++) + if (void 0 !== _[l] && (c = a = _[l], h = i, "string" == typeof(d = p) || "number" == typeof d ? void 0 !== c.splitText : + "string" == typeof d.nodeName ? !c._componentConstructor && f(c, d.nodeName) : h || c._componentConstructor === + d.nodeName)) { + u = a, _[l] = void 0, l === x - 1 && x--, l === b && b++; + break + } u = e(u, p, o, r), s = m[k], u && u !== t && u !== s && (null == s ? t.appendChild(u) : u === s.nextSibling ? + v(s) : t.insertBefore(u, s)) + } + if (g) + for (var k in y) void 0 !== y[k] && N(y[k], !1); + for (; b <= x;) void 0 !== (u = _[x--]) && N(u, !1) + }(l, _, o, r, b || null != m.dangerouslySetInnerHTML), + function(e, t, n) { + var o; + for (o in n) t && null != t[o] || null == n[o] || h(e, o, n[o], n[o] = void 0, g); + for (o in t) "children" === o || "innerHTML" === o || o in n && t[o] === ("value" === o || "checked" === o ? e[o] : + n[o]) || h(e, o, n[o], n[o] = t[o], g) + }(l, n.attributes, m), g = a, l + }(e, t, n, o, i); + return r && l.parentNode !== r && r.appendChild(l), --y || (b = !1, i || C()), l +} + +function N(e, t) { + var n = e._component; + n ? L(n) : (null != e.__preactattr_ && l(e.__preactattr_.ref, null), !1 !== t && null != e.__preactattr_ || v(e), w(e)) +} + +function w(e) { + for (e = e.lastChild; e;) { + var t = e.previousSibling; + N(e, !0), e = t + } +} +var k = []; + +function S(e, t, n) { + var o, r = k.length; + for (e.prototype && e.prototype.render ? (o = new e(t, n), T.call(o, t, n)) : ((o = new T(t, n)).constructor = e, o.render = + P); r--;) + if (k[r].constructor === e) return o.nextBase = k[r].nextBase, k.splice(r, 1), o; + return o +} + +function P(e, t, n) { + return this.constructor(e, n) +} + +function B(e, n, o, r, i) { + e._disable || (e._disable = !0, e.__ref = n.ref, e.__key = n.key, delete n.ref, delete n.key, void 0 === e.constructor + .getDerivedStateFromProps && (!e.base || i ? e.componentWillMount && e.componentWillMount() : e.componentWillReceiveProps && + e.componentWillReceiveProps(n, r)), r && r !== e.context && (e.prevContext || (e.prevContext = e.context), e.context = + r), e.prevProps || (e.prevProps = e.props), e.props = n, e._disable = !1, 0 !== o && (1 !== o && !1 === t.syncComponentUpdates && + e.base ? u(e) : U(e, 1, i)), l(e.__ref, e)) +} + +function U(e, t, n, o) { + if (!e._disable) { + var r, l, a, s = e.props, + p = e.state, + u = e.context, + c = e.prevProps || s, + f = e.prevState || p, + v = e.prevContext || u, + h = e.base, + m = e.nextBase, + g = h || m, + b = e._component, + w = !1, + k = v; + if (e.constructor.getDerivedStateFromProps && (p = i(i({}, p), e.constructor.getDerivedStateFromProps(s, p)), e.state = + p), h && (e.props = c, e.state = f, e.context = v, 2 !== t && e.shouldComponentUpdate && !1 === e.shouldComponentUpdate( + s, p, u) ? w = !0 : e.componentWillUpdate && e.componentWillUpdate(s, p, u), e.props = s, e.state = p, e.context = + u), e.prevProps = e.prevState = e.prevContext = e.nextBase = null, e._dirty = !1, !w) { + r = e.render(s, p, u), e.getChildContext && (u = i(i({}, u), e.getChildContext())), h && e.getSnapshotBeforeUpdate && + (k = e.getSnapshotBeforeUpdate(c, f)); + var P, T, M = r && r.nodeName; + if ("function" == typeof M) { + var W = d(r); + (l = b) && l.constructor === M && W.key == l.__key ? B(l, W, 1, u, !1) : (P = l, e._component = l = S(M, W, u), l.nextBase = + l.nextBase || m, l._parentComponent = e, B(l, W, 0, u, !1), U(l, 1, n, !0)), T = l.base + } else a = g, (P = b) && (a = e._component = null), (g || 1 === t) && (a && (a._component = null), T = x(a, r, u, n || + !h, g && g.parentNode, !0)); + if (g && T !== g && l !== b) { + var D = g.parentNode; + D && T !== D && (D.replaceChild(T, g), P || (g._component = null, N(g, !1))) + } + if (P && L(P), e.base = T, T && !o) { + for (var E = e, V = e; V = V._parentComponent;)(E = V).base = T; + T._component = E, T._componentConstructor = E.constructor + } + } + for (!h || n ? _.push(e) : w || e.componentDidUpdate && e.componentDidUpdate(c, f, k); e._renderCallbacks.length;) e._renderCallbacks + .pop().call(e); + y || o || C() + } +} + +function L(e) { + var t = e.base; + e._disable = !0, e.componentWillUnmount && e.componentWillUnmount(), e.base = null; + var n = e._component; + n ? L(n) : t && (null != t.__preactattr_ && l(t.__preactattr_.ref, null), e.nextBase = t, v(t), k.push(e), w(t)), l(e.__ref, + null) +} + +function T(e, t) { + this._dirty = !0, this.context = t, this.props = e, this.state = this.state || {}, this._renderCallbacks = [] +} +i(T.prototype, { + setState: function(e, t) { + this.prevState || (this.prevState = this.state), this.state = i(i({}, this.state), "function" == typeof e ? e(this + .state, this.props) : e), t && this._renderCallbacks.push(t), u(this) + }, + forceUpdate: function(e) { + e && this._renderCallbacks.push(e), U(this, 2) + }, + render: function() {} +}); +var M = function(e, t, n, o) { + for (var r = 1; r < t.length; r++) { + var i = t[r++], + l = "number" == typeof i ? n[i] : i; + 1 === t[r] ? o[0] = l : 2 === t[r] ? (o[1] = o[1] || {})[t[++r]] = l : 3 === t[r] ? o[1] = Object.assign(o[1] || {}, + l) : o.push(t[r] ? e.apply(null, M(e, l, n, ["", null])) : l) + } + return o + }, + W = function(e) { + for (var t, n, o = 1, r = "", i = "", l = [0], a = function(e) { + 1 === o && (e || (r = r.replace(/^\s*\n\s*|\s*\n\s*$/g, ""))) ? l.push(e || r, 0) : 3 === o && (e || r) ? (l.push( + e || r, 1), o = 2) : 2 === o && "..." === r && e ? l.push(e, 3) : 2 === o && r && !e ? l.push(!0, 2, r) : 4 === + o && n && (l.push(e || r, 2, n), n = ""), r = "" + }, s = 0; s < e.length; s++) { + s && (1 === o && a(), a(s)); + for (var p = 0; p < e[s].length; p++) t = e[s][p], 1 === o ? "<" === t ? (a(), l = [l], o = 3) : r += t : i ? t === + i ? i = "" : r += t : '"' === t || "'" === t ? i = t : ">" === t ? (a(), o = 1) : o && ("=" === t ? (o = 4, n = r, + r = "") : "/" === t ? (a(), 3 === o && (l = l[0]), o = l, (l = l[0]).push(o, 4), o = 0) : " " === t || "\t" === + t || "\n" === t || "\r" === t ? (a(), o = 2) : r += t) + } + return a(), l + }, + D = "function" == typeof Map, + E = D ? new Map : {}, + V = D ? function(e) { + var t = E.get(e); + return t || E.set(e, t = W(e)), t + } : function(e) { + for (var t = "", n = 0; n < e.length; n++) t += e[n].length + "-" + e[n]; + return E[t] || (E[t] = W(e)) + }; + +function A(e, t) { + ! function(t, n, o) { + x(o, e, {}, !1, n, !1) + }(0, t, t.firstElementChild) +} +var H = function(e) { + var t = M(this, V(e), arguments, []); + return t.length > 1 ? t : t[0] +}.bind(r); +export { + r as h, H as html, A as render, T as Component +}; diff --git a/src/index.ejs b/src/index.ejs new file mode 100644 index 0000000..8e5b4d5 --- /dev/null +++ b/src/index.ejs @@ -0,0 +1,19 @@ + + + + <% for (var chunk in htmlWebpackPlugin.files.css) { %> + + <% } %> + <% for (var chunk in htmlWebpackPlugin.files.chunks) { %> + + <% } %> + + xm-select + + + +
+ + + + \ No newline at end of file diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..669bcaa --- /dev/null +++ b/src/index.js @@ -0,0 +1,26 @@ +import { name, version } from '../package.json' +import Core from '@/components/core' +import '@/style/index.less' +import '@/style/iconfont.less' + + +const xmSelect = { + name, + version, + render(options) { + return new Core(options); + } +} + + +if ((typeof exports === 'undefined' ? 'undefined' : _typeof(exports)) === 'object') { + module.exports = xmSelect; +} else if (typeof define === 'function' && define.amd) { + define(xmSelect); +} else if (window.layui && layui.define) { + layui.define(function(exports) { + exports('xmSelect', xmSelect); + }); +} else { + window.xmSelect = xmSelect; +} diff --git a/src/style/iconfont.less b/src/style/iconfont.less new file mode 100644 index 0000000..97bf28e --- /dev/null +++ b/src/style/iconfont.less @@ -0,0 +1,61 @@ +/* 阿里巴巴矢量图标库 */ +@font-face { + font-family: "xm-iconfont"; + src: url('//at.alicdn.com/t/font_792691_qxv28s6g1l9.eot?t=1534240067831'); + /* IE9*/ + src: url('//at.alicdn.com/t/font_792691_qxv28s6g1l9.eot?t=1534240067831#iefix') format('embedded-opentype'), + /* IE6-IE8 */ + url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'), + url('//at.alicdn.com/t/font_792691_qxv28s6g1l9.ttf?t=1534240067831') format('truetype'), + /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ + url('//at.alicdn.com/t/font_792691_qxv28s6g1l9.svg?t=1534240067831#iconfont') format('svg'); + /* iOS 4.1- */ +} + +.xm-iconfont { + font-family: "xm-iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-quanxuan:before { + content: "\e62c"; +} + +.icon-caidan:before { + content: "\e610"; +} + +.icon-fanxuan:before { + content: "\e837"; +} + +.icon-pifu:before { + content: "\e668"; +} + +.icon-qingkong:before { + content: "\e63e"; +} + +.icon-sousuo:before { + content: "\e600"; +} + +.icon-danx:before { + content: "\e62b"; +} + +.icon-duox:before { + content: "\e613"; +} + +.icon-close:before { + content: "\e601"; +} + +.icon-expand:before { + content: "\e641"; +} diff --git a/src/style/index.less b/src/style/index.less new file mode 100644 index 0000000..20c0df6 --- /dev/null +++ b/src/style/index.less @@ -0,0 +1,209 @@ +@fontColor: #666; +@defaultBorderColor: #E6E6E6; +@disabledColor: #C2C2C2; +@border: 1px solid @defaultBorderColor; +@height: 36px; + +@-webkit-keyframes xm-upbit { + from {-webkit-transform: translate3d(0, 30px, 0);opacity: .3} + to {-webkit-transform: translate3d(0, 0, 0);opacity: 1} +} +@keyframes xm-upbit { + from {transform: translate3d(0, 30px, 0);opacity: .3} + to {transform: translate3d(0, 0, 0);opacity: 1} +} + +xm-select{ + *{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-size: 14px; + font-weight: 400; + color: @fontColor; + text-overflow: ellipsis; + user-select: none; + } + + position: relative; + border: @border; + border-radius: 2px; + height: @height; + line-height: @height; + display: block; + width: 100%; + cursor: pointer; + + &:hover{ + border-color: #C0C4CC; + } + + + & > .xm-tips{ + color: #999999; + padding: 0 10px; + height: 100%; + } + + & > .xm-icon{ + display: inline-block; + overflow: hidden; + position: absolute; + width: 0; + height: 0; + right: 10px; + top: 50%; + margin-top: -3px; + cursor: pointer; + border: 6px dashed transparent; + border-top-color: #C2C2C2; + border-top-style: solid; + transition: all .3s; + -webkit-transition: all .3s + } + + & > .xm-icon-expand{ + margin-top: -9px; + transform: rotate(180deg); + } + + & > .xm-label{ + padding: 0 10px; + height: 100%; + overflow-y: hidden; + + .xm-label-block{ + display: inline-block; + position: relative; + padding: 0px 5px; + margin: 2px 5px 2px 0; + height: 22px; + line-height: 22px; + border-radius: 3px; + vertical-align: middle; + color: #FFF; + max-width: calc(100% - 20px); + + & > span{ + display: inline-block; + color: #FFF; + text-overflow: ellipsis; + overflow: hidden; + } + + & > i{ + color: #FFF; + margin-left: 8px; + font-size: 12px; + cursor: pointer; + line-height: 20px; + position: relative; + top: -6px; + } + + &.disabled{ + background-color: @disabledColor !important; + cursor: no-drop !important; + &>i{ + cursor: no-drop !important; + } + } + } + } + + & > .xm-body { + position: absolute; + left: 0; + top: 42px; + padding: 5px 0; + z-index: 999; + width: 100%; + border: @border; + max-height: 300px; + overflow-y: auto; + background-color: #fff; + border-radius: 2px; + box-shadow: 0 2px 4px rgba(0, 0, 0, .12); + animation-fill-mode: both; + animation-name: xm-upbit; + animation-duration: .3s; + animation-fill-mode: both; + + .xm-option{ + position: relative; + padding: 0 10px; + cursor: pointer; + + &:hover{ + background-color: #f2f2f2; + + &>.xm-option-icon>i{ + color: #f2f2f2; + } + } + + &-icon{ + color: #FFF; + font-size: 16px; + width: 18px; + height: 18px; + position: absolute; + top: 9px; + border: @border; + border-radius: 5px; + z-index: 2; + + & > i { + position: absolute; + right: 0px; + top: -10px; + color: #FFF; + } + } + + &-content{ + display: inline-block; + position: relative; + padding: 0 15px 0 30px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #666; + line-height: 36px; + vertical-align: top; + width: 100%; + } + } + + .xm-select-empty{ + text-align: center; + color: #999; + } + + .disabled{ + cursor: no-drop; + &:hover{ + background-color: #FFF; + &>.xm-option-icon>i{ + color: #FFF !important; + } + } + .xm-option-icon{ + border-color: @disabledColor !important; + } + .xm-option-content{ + color: @disabledColor !important; + } + + &.selected>.xm-option-icon>i{ + color: @disabledColor !important; + } + } + } + + + .dis{ + display: none; + } + +} \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..15a04aa --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,52 @@ +const path = require('path'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); + +module.exports = { + entry: "./src/index.js", + output: { + path: path.resolve(__dirname, 'dist'), + filename: "xm-select.js" + }, + module: { + rules: [{ + test: /\.css$/, + use: 'css-loader' + }, { + test: /\.less$/, + exclude: /node_modules/, + loader: 'style-loader!css-loader!less-loader' + }, { + test: /\.m?js$/, + exclude: /(node_modules|bower_components)/, + use: { + loader: 'babel-loader', + options: { + presets: ['@babel/preset-env'] + } + } + }] + }, + resolve: { + alias: { + '@': path.resolve(__dirname, "src"), + 'components': path.resolve(__dirname, "src/components"), + 'style': path.resolve(__dirname, "src/style"), + } + }, + plugins: [ + new HtmlWebpackPlugin({ + template: './src/index.ejs', + minify: { + collapseWhitespace: true + } + }), + ], + devServer: { + contentBase: path.join(__dirname, "./dist"), + compress: true, + host: '0.0.0.0', + port: 9000, + open: true, + hot: true, + } +};