@xizhouh/former
Version:
Amazing form adapter, write less, do much.
2 lines (1 loc) • 11.5 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).Former=t()}(this,function(){"use strict";function e(t){return(e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(t)}function t(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function n(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter(function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable}))),o.forEach(function(n){t(e,n,r[n])})}return e}var r="former",o=function(e,t,n){if(-1==t.indexOf(".")&&-1==t.indexOf("["))return void(e[t]=n);var r=function(e){var t=e.split(/\.|\[|\]/g);""==t[t.length-1]&&(t=t.slice(0,-1));return t}(t),o=-1,i=r.length;for(;++o<i;)0!=r[o].length&&(o+1<i&&null==e[r[o]]&&(e[r[o]]={}),o+1<i?e=e[r[o]]:e[r[o]]=n)};var i=function(e){return null!=e&&"object"==typeof e&&!1===Array.isArray(e)};function a(e){return!0===i(e)&&"[object Object]"===Object.prototype.toString.call(e)}var s=function(e){return!1!==a(t=e)&&"function"==typeof(n=t.constructor)&&!1!==a(r=n.prototype)&&!1!==r.hasOwnProperty("isPrototypeOf")||"function"==typeof e||Array.isArray(e);var t,n,r},u=function(e,t,n){if(!s(e))return{};"function"==typeof t&&(n=t,t=[]),"string"==typeof t&&(t=[t]);for(var r="function"==typeof n,o=Object.keys(e),i={},a=0;a<o.length;a++){var u=o[a],l=e[u];t&&(-1!==t.indexOf(u)||r&&!n(l,u,e))||(i[u]=l)}return i},l=function(e){var t=p.call(e);return"[object Function]"===t||"function"==typeof e&&"[object RegExp]"!==t||"undefined"!=typeof window&&(e===window.setTimeout||e===window.alert||e===window.confirm||e===window.prompt)},p=Object.prototype.toString;function f(t){var n=arguments[1]||{};for(var r in t)"object"===e(t[r])?(n[r]=t[r]instanceof Array?[]:{},f(t[r],n[r])):n[r]=t[r];return n}function c(e,t){if("element-ui"===e){if("FORM"===t)return"el-form";if("FORM_ITEM"===t)return"el-form-item"}if("iview"===e){if("FORM"===t)return"i-form";if("FORM_ITEM"===t)return"form-item"}return"div"}function d(e,t){return e("p",t)}function m(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return t[2]=t[2]||0,t[3]=t[3]||[],t[1].forEach(function(e){if(e.value===t[0][t[2]])return e.children&&m(t[0],e.children,t[2]+1,t[3]),t[3].push(e.label)}),t[3]}var b={"element-ui":function(e,t){var r=t,o=r.props,i=r.status,a=r.type,s=r.htmlAttr,l=r.merge;if(t.class=["control"].concat(t.class),t.attrs=s,(t=u(t,["type","htmlAttr"])).props=n({},t.props,l),"input"===a)return"PREVIEW"===i?d(e,o.value):e("el-input",n({},t));if("textarea"===a)return"PREVIEW"===i?d(e,o.value):e("el-input",n({},t));if("select"===a){if("PREVIEW"===i){var p=f(t.props),c=p.options.filter(function(e){return e.value===p.value}).pop();return d(e,c.label)}return e("el-select",n({},t),o.options&&o.options.map(function(t){var r={on:n({},t.on||{}),props:n({value:t.id||t.value,label:t.name||t.label||""},u(t,["id","value","name","label","on"]))};return e("el-option",n({},r),t.name||t.label||"")}))}if("inputNumber"===a)return"PREVIEW"===i?e("p",o.value):e("el-input-number",n({},t));if("radio"===a)return"PREVIEW"===i?e("p",o.value):e("el-radio-group",n({},t),o.options&&o.options.map(function(t){var r={on:n({},t.on||{}),props:n({label:t.id||t.value},u(t,["id","value","name","label"]))};return e("el-radio",n({},r),t.name||t.label||"")}));if("checkbox"===a)return"PREVIEW"===i?e("p",o.value):e("el-checkbox-group",n({},t),o.options&&o.options.map(function(t){var r={on:n({},t.on||{}),props:n({value:t.id||t.value,label:t.name||t.label||""},u(t,["id","value","name","label"]))};return e("el-checkbox",n({},r),t.name||t.label||"")}));if("switch"===a)return"PREVIEW"===i?e("p",o.value):e("el-switch",n({},t));if("slider"===a)return"PREVIEW"===i&&(t.props.disabled=!0),e("el-slider",n({},t));if("datePicker"===a)return"PREVIEW"===i&&(t.props.disabled=!0),e("el-date-picker",n({},t));if("timeSelect"===a)return"PREVIEW"===i&&(t.props.disabled=!0),e("el-time-select",n({},t));if("timePicker"===a)return"PREVIEW"===i&&(t.props.disabled=!0),e("el-time-picker",n({},t));if("tree"===a)return"PREVIEW"===i&&(t.props.disabled=!0),e("el-tree",n({},t));if("rate"===a)return"PREVIEW"===i&&(t.props.disabled=!0),e("el-rate",n({},t,{style:{lineHeight:2.4}}));if("cascader"===a){if("PREVIEW"===i){t.props.disabled=!0;var b=m(t.props.value,t.props.options).reverse().join("/");return d(e,b)}return e("el-cascader",n({},t))}return"upload"===a?("PREVIEW"===i&&(t.props.disabled=!0),e("el-upload",n({},t),o.slots&&Object.keys(o.slots).map(function(t){return e("div",[o.slots[t](e)])}))):"custom"===a?e("div",n({},t),[o.render(e)]):void 0},iview:function(e,t){var r=t,o=r.props,i=r.status,a=r.type,s=r.htmlAttr,l=r.merge;if(t.class=["control"].concat(t.class),t.attrs=s,(t=u(t,["type","htmlAttr"])).props=n({},t.props,l),"input"===a)return"PREVIEW"===i?d(e,o.value):e("i-input",n({},t));if("textarea"===a)return"PREVIEW"===i?d(e,o.value):e("i-input",n({},t));if("select"===a){if("PREVIEW"===i){var p=f(t.props),c=p.options.filter(function(e){return e.value===p.value}).pop();return d(e,c.label)}return e("i-select",n({},t),o.options&&o.options.map(function(t){var r={on:n({},t.on||{}),props:n({value:t.id||t.value,label:t.name||t.label||""},u(t,["id","value","name","label","on"]))};return e("i-option",n({},r),t.name||t.label||"")}))}if("inputNumber"===a)return"PREVIEW"===i?e("p",o.value):e("input-number",n({},t));if("radio"===a)return"PREVIEW"===i?e("p",o.value):e("radio-group",n({},t),o.options&&o.options.map(function(r){var o={on:n({},r.on||{}),props:n({label:r.id||r.value},u(r,["id","value","name","label"]),{disabled:t.props.disabled})};return e("radio",n({},o),r.name||r.label||"")}));if("checkbox"===a)return"PREVIEW"===i?e("p",o.value):e("checkbox-group",n({},t),o.options&&o.options.map(function(r){var o={on:n({},r.on||{}),props:n({value:r.id||r.value,label:r.name||r.label||""},u(r,["id","value","name","label"]),{disabled:t.props.disabled})};return e("checkbox",n({},o),r.name||r.label||"")}));if("switch"===a)return"PREVIEW"===i?e("p",o.value):e("i-switch",n({},t));if("slider"===a)return"PREVIEW"===i&&(t.props.disabled=!0),e("slider",n({},t));if("datePicker"===a)return"PREVIEW"===i&&(t.props.disabled=!0),e("date-picker",n({},t));if("timePicker"===a)return"PREVIEW"===i&&(t.props.disabled=!0),e("time-picker",n({},t));if("tree"===a)return"PREVIEW"===i&&(t.props.disabled=!0),e("tree",n({},t));if("rate"===a)return"PREVIEW"===i&&(t.props.disabled=!0),e("rate",n({},t,{style:{lineHeight:2.4}}));if("cascader"===a){if("PREVIEW"===i){t.props.disabled=!0;var b=m(t.props.value,t.props.data).reverse().join("/");return d(e,b)}return e("cascader",n({},t))}return"upload"===a?("PREVIEW"===i&&(t.props.disabled=!0),e("upload",n({},t),o.slots&&Object.keys(o.slots).map(function(t){return e("div",[o.slots[t](e)])}))):"custom"===a?e("div",n({},t),[o.render(e)]):void 0}};!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".former-wrapper {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n\n.former-main {\n width: 100%;\n}\n\n.former-top {\n padding-bottom: 5px;\n}\n\n.former-bottom {\n padding-top: 5px;\n}\n\n.former-top,\n.former-bottom {\n color: #909399;\n}\n\n.former-control {\n width: 100%;\n}\n\n.former-suffix,\n.former-prefix {\n color: #909399;\n}\n\n.former-suffix {\n margin-left: 10px;\n}\n\n.former-prefix {\n margin-right: 10px;\n}\n");var v={name:"".concat(r,"-item"),inject:["statusEmitter","model"],props:{ui:{type:String,default:function(){return"element-ui"}},fields:{type:Object,default:function(){}}},data:function(){return{status:"EDIT"}},mounted:function(){var e=this,n=this.$props.fields;n.name&&this.statusEmitter&&(this.statusEmitter.core.emit("init",t({},n.name,"EDIT")),this.statusEmitter.core.on("update",function(t){t&&t.name===n.name&&e.status!==t.status&&(e.status=t.status,e.$forceUpdate())}))},render:function(e){var t=this,i=this.$props,a=i.fields,s=i.ui;a=f(a)||{};var p={props:n({},u(a,["on","class","style","type","top","prefix","suffix","bottom","onChange","when","htmlAttr","merge"]),{prop:a.name||"",disabled:!1})||{},on:a.on||{},class:a.class||[],style:a.style||{},htmlAttr:a.htmlAttr||{},status:this.$data.status||"EDIT",type:a.type||"input",onChange:a.onChange||null,merge:a.merge||{},when:!a.hasOwnProperty("when")||a.when},d={top:a.top,prefix:a.prefix,suffix:a.suffix,bottom:a.bottom};"DISABLED"===p.status&&(p.props.disabled=!0),p.on.input=function(e){t.$emit("input",e),p.onChange&&p.onChange(e,t.model)},p.props.value=function(e,t){if(!/[^\w.$]/.test(t=t||"")){for(var n=t.split("."),r=0;r<n.length;r++){if(!e)return;e=e[n[r]]}return e}}(this.model,p.props.name),this.$on("input",function(e){o(t.model,p.props.name,e)});var m,v,h=(m=p.when,v=f(this.model),"boolean"==typeof m?m:"function"==typeof m?m(v):void 0);return p.hasOwnProperty("when")&&!h?null:e(c(s,"FORM_ITEM"),{props:p.props},[d.top&&e("div",{class:["".concat(r,"-top")]},[l(d.top)?d.top(e):d.top]),e("div",{class:["".concat(r,"-wrapper")]},[d.prefix&&e("div",{class:["".concat(r,"-prefix")]},[l(d.prefix)?d.prefix(e):d.prefix]),e("div",{class:["".concat(r,"-main")]},[b[s](e,p)]),d.suffix&&e("div",{class:["".concat(r,"-suffix")]},[l(d.suffix)?d.suffix(e):d.suffix])]),d.bottom&&e("div",{class:["".concat(r,"-bottom")]},[l(d.bottom)?d.bottom(e):d.bottom])])}};return{name:r,provide:function(){return{statusEmitter:this.statusEmitter,model:this.$props.model}},components:{FormItem:v},props:{schema:{type:Array,default:function(){return[]}},model:{type:Object,default:function(){}},options:{type:Object,default:function(){}},ui:{type:String,default:function(){return"element-ui"}}},data:function(){return{statusCenter:{},statusEmitter:{core:null}}},created:function(){var e,t=this;(this.statusEmitter.core=(e=e||Object.create(null),{on:function(t,n){(e[t]||(e[t]=[])).push(n)},off:function(t,n){e[t]&&e[t].splice(e[t].indexOf(n)>>>0,1)},emit:function(t,n){(e[t]||[]).slice().map(function(e){e(n)}),(e["*"]||[]).slice().map(function(e){e(t,n)})}})).on("init",function(e){t.statusCenter=n({},t.statusCenter,e)})},mounted:function(){this.$refs[r]&&(this.validate=this.$refs[r].validate,this.validateField=this.$refs[r].validateField,this.resetFields=this.$refs[r].resetFields,this.clearValidate=this.$refs[r].clearValidate)},methods:{setStatus:function(e,t){this.statusEmitter.core.emit("update",{name:e,status:t}),this.statusCenter[e]&&(this.statusCenter[e]=t)},getStatus:function(e){return this.statusCenter[e]},setGlobalStatus:function(e){var t=this,r=this.statusCenter;e=e||"EDIT",Object.keys(r).forEach(function(n){r[n]=e,t.statusEmitter.core.emit("update",{name:n,status:e})}),this.statusCenter=n({},r)},getGlobalStatus:function(){return this.statusCenter}},render:function(e){var t=this.$props,o=t.schema,i=t.model,a=t.options,s=t.ui;return e(c(s,"FORM"),{ref:r,props:n({},a,{model:i})},o.map(function(t,n){return e(v,{key:n,props:{fields:t,ui:s}})}))}}});