|
- /*!
- Form Repeat
- Version: 1.0.1
- (c) 2022 Wappler.io
- @build 2022-08-18 10:34:49
- */
- dmx.Component("form-repeat",{initialData:{canAdd:!0,items:[]},attributes:{items:{type:[Array,Number],default:0},min:{type:Number,default:0},max:{type:Number,default:1/0},sortable:{type:Boolean,default:!1},handle:{type:String,default:null},animation:{type:Number,default:0}},methods:{add:function(){this._add()},remove:function(e){this._remove(e)},move:function(e,t){this._mode(e,t,!0)},moveToStart:function(e){this._move(e,0,!0)},moveToEnd:function(e){this._move(e,this.children.length-1,!0)},moveBefore:function(e){this._move(e,e-1,!0)},moveAfter:function(e){this._move(e,e+1,!0)},duplicate:function(e){this._duplicate(e)},reset:function(){this._render()}},render:function(e){this._template=this._templateFromChildren(e);this._template.querySelectorAll("input[name], select[name], textarea[name]").forEach((e=>{const t=e.name.indexOf("[");t>0?e.setAttribute("dmx-bind:name",this.name+"[{{$index}}]["+e.name.slice(0,t)+"]"+e.name.slice(t)):e.setAttribute("dmx-bind:name",this.name+"[{{$index}}]["+e.name+"]")})),this.update({})},update:function(e,t){dmx.equal(e.items,this.props.items)||this._render(),e.sortable!=this.props.sortable&&(this.props.sortable?this.sortable?this.sortable.option("disabled",!1):window.Sortable?this.sortable=Sortable.create(this.$node,{handle:this.props.handle,onEnd:e=>this._move(e.oldIndex,e.newIndex)}):console.warn("Sortable script is missing."):this.sortable&&this.sortable.option("disabled",!0)),e.handle!=this.props.handle&&this.sortable&&this.sortable.option("handle",this.props.handle),e.animation!=this.props.animation&&this.sortable&&this.sortable.option("animation",this.props.animation),dmx.equal(e,this.props)||this._refresh()},_render:function(){const e=dmx.repeatItems("string"==typeof this.props.items?Number(this.props.items):this.props.items);e.length<this.props.min&&(e.length=this.props.min),e.length>this.props.max&&(e.length=this.props.max),this._clear();for(let t=0;t<e.length;t++)this._add(e[t])},_duplicate:function(e){this._add(),this._move(this.children.length-1,e+1,!0);let t=[];this.children[e].$nodes.forEach((e=>{1==e.nodeType&&t.push(...Array.from(e.querySelectorAll("input[name], textarea[name], select[name]")))}));let i=[];if(this.children[e+1].$nodes.forEach((e=>{1==e.nodeType&&i.push(...Array.from(e.querySelectorAll("input[name], textarea[name], select[name]")))})),t.length==i.length)for(let e=0;e<t.length;e++){const n=t[e],s=i[e];if(n.tagName!=s.tagName)break;if("TEXTAREA"==n.tagName)s.value=n.value;else if("INPUT"==n.tagName){if("file"==n.type||"password"==n.type)continue;"checkbox"==n.type||"radio"==n.type?s.checked=n.checked:s.value=n.value}else if("SELECT"==n.tagName)if(n.multiple)for(const e of n.selectedOptions)for(const t of s.options)e.value==t.value&&(t.selected=!0);else s.value=n.value;s.dispatchEvent(new Event("change"))}},_add:function(e={}){if(this.children.length>=this.props.max)return;const t=new(dmx.Component("repeat-item"))(this._template.cloneNode(!0),this,e);t.$nodes.forEach((e=>{this.$node.appendChild(e),t.$parse(e)})),this.children.push(t),this._refresh()},_remove:function(e){this.children.length<=this.props.min||(this.children.splice(e,1).forEach((e=>{e.$destroy()})),this._refresh())},_refresh:function(){this.children.forEach(((e,t)=>{e.set({$index:t,$canRemove:this.children.length>this.props.min,$canMoveToStart:t>0,$canMoveBefore:t>0,$canMoveAfter:t<this.children.length-1,$canMoveToEnd:t<this.children.length-1})})),this.set("canAdd",this.children.length<this.props.max),this.set("items",this.children.map((e=>e.data)))},_clear:function(){this.children.splice(0).forEach((e=>{e.$destroy()})),this.$node.innerHTML=""},_move:function(e,t,i){e<0||e>=this.children.length||t<0||t>=this.children.length||(this.children.splice(t,0,this.children.splice(e,1)[0]),i&&(this.$node.innerHTML="",this.children.forEach((e=>{e.$nodes.forEach((e=>{this.$node.appendChild(e)}))}))),this._refresh())},_templateFromChildren:function(e){const t=document.createDocumentFragment();for(;e.hasChildNodes();)t.appendChild(e.firstChild);return t}});
- //# sourceMappingURL=../maps/dmxFormRepeat.js.map
|
