0&&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,d09GRgABAAAAAAsYAAsAAAAAEQwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY8ukovY21hcAAAAYAAAACrAAACPBtV6wxnbHlmAAACLAAABnEAAAmMovtEvWhlYWQAAAigAAAAMQAAADYSctBCaGhlYQAACNQAAAAgAAAAJAgBA69obXR4AAAI9AAAABsAAAAwMCX//WxvY2EAAAkQAAAAGgAAABoN8gwubWF4cAAACSwAAAAeAAAAIAEiAM9uYW1lAAAJTAAAAUUAAAJtPlT+fXBvc3QAAAqUAAAAhAAAALJ1LunfeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWacwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGByeMbwwZ27438AQw9zMcAQozAiSAwDk4AxmeJzlks0JwzAMhZ8bN/1xD4GU0h2Se26BbJMJOkkn6KmTPbJF8mT5UGg3qMRn0EPIRs8A9gAq0YsIhDcCLF5SQ9YrnLMe8VB9RSMlMjCxYcueIyfOy7CuAFHU7lP9iqApt5L3ksBJbzlgZ9PVkXDUvbWa6x8T/i0u+XyWKtmmHW0NDI55yeRok2DjaKdg65jX7Bzzm71jXnN08vzJkQvg7Ng/WAYH9Qb3wzM/AHicjVVvbFzFEd/Zfbv7/vn9uXf33vl8Pt/dO99BHOzEZ9/DKTImRS0KjUoLDUFCjtpCMGkT1D9qldQmhkiUSv2G1BBB1VYqilGREOIDViWEGzttqkpI/cAXqyL5gFRALVIF+VCJe9fZd+fEpR/o6d3s7G9mZ2dmZ3aJIKR3h0ZYmVgkIjGZJV8mDxECtenOTDOu1UU+hJoD+TCqzcNMk2V8O5OCbDVRPgZhEt4JCNTZ/4HA3+DfuWIxl8pcFFErG3K7oD7fvev8UaMUmEu259lrRjBsfs6cLhYbRfzSbSjGRVAkfQYihUXsyPkHTVyyZDNmXzSHg3Tl+aPKxpJFqbWGdtLl8w8iYDxuDTQIx7yc1YCdIx7Jk3HSwbwQwGBcyMKZVtG0ZCuJxjFJBb+foMSfhJaPOSr4FYgwSwqIx2MHJALtAdBi/7xcSMJL+fxmmBS2guD61tZm96X02mgcj0J1NAaIR9UMmhXIV24FuLUC71+r1AEmK1AYrQHUK/Tly/m8MrOZz2+FSf7jzc3NK9XR9F2lVq+gmRp0r+HK9B+VJmR263Rgd7ALwR/FOFfx/FeJS0YxQh9drakgMJhaBVizkwgqWxLD6eQ0Qo8f7p44fJziSH9x+PjLZUO+/jZ9+K35X37ljn/Rv+yW4Ziuf2nl4PfS5/LrP47OHTsFJULYjf369UZAEBmSqEOSJmG4Me6LeznA0BFkcDoJlGynVzmH2vY21DhPr25v9DjvbfTp2TXG1s5mlK0q4S7lT++6obbRox/s6CHF2LMEsHvoFfSFQIKnKQMZJVFCD6WH0p0PVvvcRx8uph8eUks0jOFNtskOkpDsJ18k9+NqVRg3qqMCSSerjyRuYUi1/vFH7YIqikGVcD+ehFl/pqPSPKZ6DG6mHisljFhBFvU/PoRkSNd/JHO6Ja5JOXcfwIGJbm/igBq/hn8Kfb57YbYUxyX4cwkLKH1u4gD9GVSL6USxCjjCO2p8VdcvH9XRYIQWqUblu3pR/v2BvXMAc3tTmJiDAQ895B9NL0C9BFdKqqRKczDX/Whg7O1irVbcqZ8/sbfYBOZwihC+6wSDzszUf+dF7rRO1O+fKaDO+nXOr6+vf8L5J44Qe4UvnlyRntwrxMoKzpFdeRJBNb9dGyiur1+nE59R+uwi9M1G395jb9KP0bcK2YM9nJB5cojcS75OFskxclzdc+pW699z8iYbtf14BGKf77ruZNyXKC0e50OEBI+V/Aug5Dex/9WjJfipuqnS00gfybjXbNe1f762tXmRPp3Bdl/l6g5JXyqXR0bK8J3PR+jvwYs8/GBnTM+kr8FX4ZknwC16XtG9iH9QfNn1vDHPe2GAj3ieV3XdF2+IPdeteh62Ra+HfQrsKWKSBtlHSOBgM7KkKQBLWnZoq1mVwotCLRGhOtSkMzMuqq2ml3SqUehdnZtynbtPLB88/Dy9dDrYVzoy/MTT6Svnlpd/AHueon5wpnGsEae/PZm+d3Jp6SSUTy7R3xw4f9/B5RN3O+5t3VNncjm6Cnt+uLx8DpedGj4yvD84HceNxTcG6ku4VPmZ9n6nNdj95BHyB3IJKxBPsKm6rpn4QopmqzlFm1MwqdxO5rPGnIc7aSfCGg1Vqyo6nUlQhnh7WiFhXzgGhVC4qjPRki9xdGCc4zXeSWb9BG1ktlqz2Q5Y7S2sIJfivkpVKCCDpyCWdbQzECj76qMVqvyJ/LxyI2rTv1bTC25lSM9xAUJ4Lc+U0wXTsKXDmaA8tHX+hvDt4Wa9IHLcMUBz9VwpL4xi2aGasAPPKNUbbmD/2jAtk0uXY4eJx8zRgj9iAnVNt5X+BL5vlHTOaiOmG7g6+7ZBNUOaefNXuJF3u25RjVvBLeW8E4wV7ZJBpbAXXGnqrwgupWVTAKqZjq5HbW44fMguNJhgwmw8oOk8GCqE8F3GhLB0uS/UDVt4lgjtqGxK/rpwuaDAqKHZNuWmJjVKuWUxbpg2B9DtoRdN3TKF9B0hw4p41C5i3CI9w4civP3aQLlmLMK3wpJpaI7BvmlhPtH3nPWCKQAdE2hK9zyuUeAm921qCA2kvqY8N1yDMq4beJlG+4XQqHDCQnqPlJIyyN579S4tIGcRv/82BbFfK9SgnVHkZzMeaSQjqR5/fP5XF2Chh+sW0g0gn27snqXv3/bsszsfJbCAIiTdjRTVCBL6jV0K5D8H/8xVAAAAeJxjYGRgYADi16c/vIvnt/nKwM3CAALXZxxzhtH///23YVFhbgZyORiYQKIAm34OJQAAAHicY2BkYGBu+N/AEMOi/P/f//8sKgxAERTAAwCmuAa3eJxjYWBgYAFhRiiNFf//z6L8/x+IDQAkCQRQAAAAAAAAjAEAATgBfgGaAiACbgMMA2AEhATGAAB4nGNgZGBg4GE4DMQgwATEXEDIwPAfzGcAAB2tAfIAAHicZY9NTsMwEIVf+gekEqqoYIfkBWIBKP0Rq25YVGr3XXTfpk6bKokjx63UA3AejsAJOALcgDvwSCebNpbH37x5Y08A3OAHHo7fLfeRPVwyO3INF7gXrlN/EG6QX4SbaONVuEX9TdjHM6bCbXRheYPXuGL2hHdhDx18CNdwjU/hOvUv4Qb5W7iJO/wKt9Dx6sI+5l5XuI1HL/bHVi+cXqnlQcWhySKTOb+CmV7vkoWt0uqca1vEJlODoF9JU51pW91T7NdD5yIVWZOqCas6SYzKrdnq0AUb5/JRrxeJHoQm5Vhj/rbGAo5xBYUlDowxQhhkiMro6DtVZvSvsUPCXntWPc3ndFsU1P9zhQEC9M9cU7qy0nk6T4E9XxtSdXQrbsuelDSRXs1JErJCXta2VELqATZlV44RelzRiT8oZ0j/AAlabsgAAAB4nG2L3QqCQBCFZ9RWU7sOfAeh8IFi3N10EHYUG1p8+gSjqz44F+cPEjgo4T81Jphihic0mGOBZyyxwhovUCxKIe4ylthRuDqV+I22UcLQ6+QH4ubWdZZkU3m4o/0tUqtSvT33TPLits12fzc+zhRcvoquo0o281OLhcMw7Q+AD8sULE0=\') 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,
+ }
+};