formbuilder-plugin-group 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/group.mjs +1 -1
- package/dist/group.umd.js +1 -1
- package/package.json +1 -1
package/dist/group.mjs
CHANGED
package/dist/group.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.formBuilderGroup={}))})(this,function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var t=`.fields-wrap{display:none}.group-editor{box-sizing:border-box;border:1px dashed #b6b6b6;border-radius:4px;width:100%;padding:8px}.group-children{margin:0;padding:0;list-style:none}.group-child{background:#f7f7f7;border-radius:3px;margin-bottom:4px;padding:4px}.group-child .gc-handle{cursor:move}.group-child .gc-label{flex:1}.group-item-preview{align-items:center;gap:6px;display:flex}.group-item-preview .gc-btn{appearance:none;color:#8d8d8d;cursor:pointer;background:0 0;border:0;border-radius:3px;flex:none;width:20px;height:20px;padding:0;line-height:20px;transition:color .15s,background-color .15s;font-size:.85em!important}.group-item-preview .gc-btn:hover{color:#333;background-color:#0000000f}.group-item-preview .gc-remove:hover{color:#c10000}.group-child-edit{flex-basis:100%;margin-top:6px}.prev-holder .group-child-edit .form-group>label:not([class=formbuilder-checkbox-label]){display:block}.prev-holder .group-child-edit .form-group{margin-bottom:15px!important;font-size:.85em!important}.prev-holder .group-child-edit .form-group label{display:block!important}.prev-holder .group-child-edit .form-group .form-control{height:28px;font-size:inherit}.prev-holder .group-child-edit input[type=text],.prev-holder .group-child-edit input[type=number],.prev-holder .group-child-edit textarea,.prev-holder .group-child-edit select{box-shadow:none}.fb-group{border:1px solid #ddd;border-radius:4px;padding:12px}.fb-group-instance{border-bottom:1px solid #eee;padding:8px 0;position:relative}.fb-group-instance:last-child{border-bottom:none}.fb-group-remove{position:absolute;top:8px;right:0}`;function n(e){if(typeof document>`u`||!e||document.head.querySelector(`style[data-formbuilder-group]`))return;let t=document.createElement(`style`);t.setAttribute(`data-formbuilder-group`,``),t.textContent=e,document.head.appendChild(t)}function r(e){if(Array.isArray(e))return e;if(typeof e==`string`&&e.trim()!==``)try{let t=JSON.parse(e);return Array.isArray(t)?t:[]}catch{return[]}return[]}function i(e){let t=e.label,n=e.markup(`div`,null,{className:`group-instances`}),r=[];t&&r.push(e.markup(`legend`,e.parsedHtml(t))),r.push(n);let i=e.markup(`fieldset`,r,{className:`fb-group`});return e._groupHost=n,{field:i,layout:`noLabel`}}function a(e,t,n){n(e).formRender({formData:t,container:e})}function o(e,t,n){return(e||[]).map(e=>{let r=structuredClone(e);if(delete r.id,typeof r.name==`string`&&r.name!==``){let e=r.name.endsWith(`[]`);r.name=`${t}[${n}][${e?r.name.slice(0,-2):r.name}]${e?`[]`:``}`}return r})}function s(e,t,n){let{fields:r,groupName:i,addLabel:s}=t,c=Number.isFinite(+t.min)&&+t.min>0?+t.min:1,l=t.max===``||t.max==null?null:+t.max;l!==null&&l<c&&(l=c);let u=0,d=0,f=document.createElement(`div`);f.className=`fb-group-controls`;let p=document.createElement(`button`);p.type=`button`,p.className=`fb-group-add`,p.textContent=s||`Add another`,f.appendChild(p);function m(){p.disabled=l!=null&&d>=l,e.querySelectorAll(`.fb-group-remove`).forEach(e=>{e.disabled=d<=c})}function h(){if(l!=null&&d>=l)return;let t=u++,s=document.createElement(`div`);s.className=`fb-group-instance`;let c=document.createElement(`div`);s.appendChild(c);let f=document.createElement(`button`);f.type=`button`,f.className=`fb-group-remove`,f.textContent=`×`,f.addEventListener(`click`,()=>g(s)),s.appendChild(f),e.appendChild(s),a(c,o(r,i,t),n),d++,m()}function g(e){d<=c||(e.remove(),d--,m())}p.addEventListener(`click`,h),(e.parentNode||e).appendChild(f);for(let e=0;e<c;e++)h();return{addInstance:h,removeInstance:g,count:()=>d}}function c(e){let t=(e||[]).map(e=>structuredClone(e));return{get:()=>t.map(e=>structuredClone(e)),set:e=>{t=e.map(e=>structuredClone(e))},add:e=>{t.push(structuredClone(e))},removeAt:e=>{t.splice(e,1)},updateAt:(e,n)=>{t[e]=structuredClone(n)},moveTo:(e,n)=>{let[r]=t.splice(e,1);t.splice(n,0,r)}}}function l(e){let t=e&&e.closest(`.form-field`);return t?t.querySelector(`.fld-fields`):null}function u(e,t){e&&(e.value=JSON.stringify(t.get()))}function d(e){let t=c(e.childFields),n=e.markup(`ol`,null,{className:`group-children`}),r=e.markup(`div`,null,{className:`group-add`}),i=e.markup(`div`,[n,r],{className:`group-editor`});return e._groupEditor={state:t,list:n,pickerMount:r,editor:i,hidden:null},{field:i,layout:`noLabel`}}function f(e,t){let n=document.createElement(`div`);n.className=`group-picker`;let r=document.createElement(`select`);e.filter(e=>e.type!==`group`).forEach(e=>{let t=document.createElement(`option`);t.value=e.type,t.textContent=e.label||e.type,r.appendChild(t)});let i=document.createElement(`button`);return i.type=`button`,i.className=`group-add-btn`,i.textContent=`Add field`,i.addEventListener(`click`,()=>{r.value&&t(r.value)}),n.append(r,i),n}function p(e){return e=String(e).replace(/[^\w\s\-\[\]]/gi,``),e=e.replace(/\[([^\]]+)\]/g,`-$1`),e=e.replace(/([A-Z])/g,e=>`-`+e.toLowerCase()),e.replace(/\s/g,`-`).replace(/^-+/g,``)}function m(e){return JSON.parse(JSON.stringify(e))}var h=(()=>{let e,t=0;return n=>{let r=Date.now();return r===e?t++:(t=0,e=r),`${n.type||p(n.label)}-${r}-${t}`}})(),g=[`text`,`number`,`file`,`date`,`select`,`textarea`,`autocomplete`];function _(e){return e.name||=h(e),g.includes(e.type)&&(e.className=e.className||`form-control`),e}function v(e,t){let n=e&&e.controls;if(!n)return[_({type:t,label:t})];let r=(n.opts&&n.opts.inputSets||[]).find(e=>(e.name||p(e.label))===t);if(r){let e=[];return r.showHeader&&e.push(_({type:`header`,subtype:`h2`,id:r.name,label:r.label})),(r.fields||[]).forEach(t=>e.push(_(m(t)))),e}let i=n.custom&&n.custom.lookup(t);if(i){let e=m(i);return e.label=n.custom.label(t),[_(e)]}let a=n.getClass&&n.getClass(t);return[_({type:t,label:a&&typeof a.label==`function`?a.label(t):t})]}function y(e,t){let n=e&&e.controls;return n&&Array.isArray(n.controlList)?n.controlList.filter(e=>e!==`group`).map(e=>{let t=n.allControls&&n.allControls[e];return{type:e,label:(t&&t.textContent?t.textContent.trim():``)||e}}):(t&&t.getRegistered?t.getRegistered():[]).filter(e=>e!==`group`).map(e=>({type:e,label:e}))}function b(e,t,n){let r=document.createElement(`li`);r.className=`group-child`,r.dataset.index=String(t);let i=document.createElement(`span`);i.className=`gc-handle`,i.textContent=`⋮⋮`;let a=document.createElement(`span`);a.className=`gc-label`,a.textContent=`${e.type}: ${e.label||e.name||``}`;let o=(e,n,r,i)=>{let a=document.createElement(`button`);return a.type=`button`,a.className=`gc-btn ${e} ${n}`,a.title=r,a.setAttribute(`aria-label`,r),a.addEventListener(`click`,()=>i(t)),a},s=document.createElement(`div`);return s.className=`group-item-preview`,s.append(i,a,o(`gc-edit`,`formbuilder-icon-pencil`,`Edit`,n.onEdit),o(`gc-duplicate`,`formbuilder-icon-copy`,`Duplicate`,n.onDuplicate),o(`gc-remove`,`formbuilder-icon-cancel`,`Remove`,n.onRemove)),r.append(s),r}function x(e){let t=e;for(;t;){if(t.fbInstance)return t.fbInstance;t=t.parentElement}return null}function S(e,t,n){let{state:r,hidden:i}=e._groupEditor,a=e._findInstance();if(!a||typeof a.generateAdvFields!=`function`)return;let o=n.querySelector(`.group-child-edit`);if(o){o.remove();return}let s=r.get()[t],c=a.generateAdvFields(s),l=document.createElement(`div`);l.className=`group-child-edit`,l.appendChild(c),n.appendChild(l);let d=()=>{let e=a.getAttrVals(c);r.updateAt(t,{type:s.type,...e}),u(i,r)};c.addEventListener(`input`,d),c.addEventListener(`change`,d)}window.fbControls||(window.fbControls=[]);function C(e,t){let n=e;e.jsonAttrs&&e.jsonAttrs.set(`group`,[`fields`]);class o extends e{static get definition(){return{icon:`▦`,i18n:{default:`Group`},defaultAttrs:{repeatable:{label:`Repeatable`,type:`checkbox`,value:!1},min:{label:`Min instances`,type:`number`,value:1},max:{label:`Max instances`,type:`number`,value:``},addLabel:{label:`Add button text`,type:`text`,value:`Add another`},fields:{label:``,type:`hidden`,value:`[]`}},disabledAttrs:[`value`,`placeholder`]}}get childFields(){return r(this.config.fields)}build(){return this.preview?this.buildEditor():this.buildRender()}buildEditor(){return d(this)}buildRender(){return i(this)}onRender(){if(this.preview)return this.onRenderEditor();if(this._rendered)return;this._rendered=!0;let e=window.jQuery;this.config.repeatable?this.renderRepeatable(e):a(this._groupHost,this.childFields,e)}renderRepeatable(e){s(this._groupHost,{fields:this.childFields,groupName:this.config.name,min:this.config.min,max:this.config.max,addLabel:this.config.addLabel},e)}onRenderEditor(){this._groupEditor.hidden=l(this.element);let{state:e,list:t,pickerMount:r}=this._groupEditor,i=()=>{u(this._groupEditor.hidden,e),this.onRenderEditor()};t.replaceChildren(),e.get().forEach((n,r)=>{t.appendChild(b(n,r,{onEdit:e=>this.openChildEditor(e),onDuplicate:t=>{e.add(e.get()[t]),i()},onRemove:t=>{e.removeAt(t),i()}}))});let a=window.jQuery;a&&a.fn.sortable&&a(t).sortable({handle:`.gc-handle`,items:`> li.group-child`,update:(n,r)=>{let o=Number(r.item.data(`startIndex`)),s=a(t).children().index(r.item);!Number.isNaN(o)&&o!==s&&(e.moveTo(o,s),i())},start:(e,t)=>t.item.data(`startIndex`,t.item.index())});let o=this._findInstance(),s=y(o,n);r.replaceChildren(),r.appendChild(f(s,t=>{v(o,t).forEach(t=>e.add(t)),i()}))}_findInstance(){return x(this.element)}openChildEditor(e){let t=this._groupEditor.list.querySelector(`li.group-child[data-index="${e}"]`);t&&S(this,e,t)}}return e.register(`group`,o),o}window.fbControls.push(C),n(t),e.VERSION=`0.1
|
|
1
|
+
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.formBuilderGroup={}))})(this,function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var t=`.fields-wrap{display:none}.group-editor{box-sizing:border-box;border:1px dashed #b6b6b6;border-radius:4px;width:100%;padding:8px}.group-children{margin:0;padding:0;list-style:none}.group-child{background:#f7f7f7;border-radius:3px;margin-bottom:4px;padding:4px}.group-child .gc-handle{cursor:move}.group-child .gc-label{flex:1}.group-item-preview{align-items:center;gap:6px;display:flex}.group-item-preview .gc-btn{appearance:none;color:#8d8d8d;cursor:pointer;background:0 0;border:0;border-radius:3px;flex:none;width:20px;height:20px;padding:0;line-height:20px;transition:color .15s,background-color .15s;font-size:.85em!important}.group-item-preview .gc-btn:hover{color:#333;background-color:#0000000f}.group-item-preview .gc-remove:hover{color:#c10000}.group-child-edit{flex-basis:100%;margin-top:6px}.prev-holder .group-child-edit .form-group>label:not([class=formbuilder-checkbox-label]){display:block}.prev-holder .group-child-edit .form-group{margin-bottom:15px!important;font-size:.85em!important}.prev-holder .group-child-edit .form-group label{display:block!important}.prev-holder .group-child-edit .form-group .form-control{height:28px;font-size:inherit}.prev-holder .group-child-edit input[type=text],.prev-holder .group-child-edit input[type=number],.prev-holder .group-child-edit textarea,.prev-holder .group-child-edit select{box-shadow:none}.fb-group{border:1px solid #ddd;border-radius:4px;padding:12px}.fb-group-instance{border-bottom:1px solid #eee;padding:8px 0;position:relative}.fb-group-instance:last-child{border-bottom:none}.fb-group-remove{position:absolute;top:8px;right:0}`;function n(e){if(typeof document>`u`||!e||document.head.querySelector(`style[data-formbuilder-group]`))return;let t=document.createElement(`style`);t.setAttribute(`data-formbuilder-group`,``),t.textContent=e,document.head.appendChild(t)}function r(e){if(Array.isArray(e))return e;if(typeof e==`string`&&e.trim()!==``)try{let t=JSON.parse(e);return Array.isArray(t)?t:[]}catch{return[]}return[]}function i(e){let t=e.label,n=e.markup(`div`,null,{className:`group-instances`}),r=[];t&&r.push(e.markup(`legend`,e.parsedHtml(t))),r.push(n);let i=e.markup(`fieldset`,r,{className:`fb-group`});return e._groupHost=n,{field:i,layout:`noLabel`}}function a(e,t,n){n(e).formRender({formData:t,container:e})}function o(e,t,n){return(e||[]).map(e=>{let r=structuredClone(e);if(delete r.id,typeof r.name==`string`&&r.name!==``){let e=r.name.endsWith(`[]`);r.name=`${t}[${n}][${e?r.name.slice(0,-2):r.name}]${e?`[]`:``}`}return r})}function s(e,t,n){let{fields:r,groupName:i,addLabel:s}=t,c=Number.isFinite(+t.min)&&+t.min>0?+t.min:1,l=t.max===``||t.max==null?null:+t.max;l!==null&&l<c&&(l=c);let u=0,d=0,f=document.createElement(`div`);f.className=`fb-group-controls`;let p=document.createElement(`button`);p.type=`button`,p.className=`fb-group-add`,p.textContent=s||`Add another`,f.appendChild(p);function m(){p.disabled=l!=null&&d>=l,e.querySelectorAll(`.fb-group-remove`).forEach(e=>{e.disabled=d<=c})}function h(){if(l!=null&&d>=l)return;let t=u++,s=document.createElement(`div`);s.className=`fb-group-instance`;let c=document.createElement(`div`);s.appendChild(c);let f=document.createElement(`button`);f.type=`button`,f.className=`fb-group-remove`,f.textContent=`×`,f.addEventListener(`click`,()=>g(s)),s.appendChild(f),e.appendChild(s),a(c,o(r,i,t),n),d++,m()}function g(e){d<=c||(e.remove(),d--,m())}p.addEventListener(`click`,h),(e.parentNode||e).appendChild(f);for(let e=0;e<c;e++)h();return{addInstance:h,removeInstance:g,count:()=>d}}function c(e){let t=(e||[]).map(e=>structuredClone(e));return{get:()=>t.map(e=>structuredClone(e)),set:e=>{t=e.map(e=>structuredClone(e))},add:e=>{t.push(structuredClone(e))},removeAt:e=>{t.splice(e,1)},updateAt:(e,n)=>{t[e]=structuredClone(n)},moveTo:(e,n)=>{let[r]=t.splice(e,1);t.splice(n,0,r)}}}function l(e){let t=e&&e.closest(`.form-field`);return t?t.querySelector(`.fld-fields`):null}function u(e,t){e&&(e.value=JSON.stringify(t.get()))}function d(e){let t=c(e.childFields),n=e.markup(`ol`,null,{className:`group-children`}),r=e.markup(`div`,null,{className:`group-add`}),i=e.markup(`div`,[n,r],{className:`group-editor`});return e._groupEditor={state:t,list:n,pickerMount:r,editor:i,hidden:null},{field:i,layout:`noLabel`}}function f(e,t){let n=document.createElement(`div`);n.className=`group-picker`;let r=document.createElement(`select`);e.filter(e=>e.type!==`group`).forEach(e=>{let t=document.createElement(`option`);t.value=e.type,t.textContent=e.label||e.type,r.appendChild(t)});let i=document.createElement(`button`);return i.type=`button`,i.className=`group-add-btn`,i.textContent=`Add field`,i.addEventListener(`click`,()=>{r.value&&t(r.value)}),n.append(r,i),n}function p(e){return e=String(e).replace(/[^\w\s\-\[\]]/gi,``),e=e.replace(/\[([^\]]+)\]/g,`-$1`),e=e.replace(/([A-Z])/g,e=>`-`+e.toLowerCase()),e.replace(/\s/g,`-`).replace(/^-+/g,``)}function m(e){return JSON.parse(JSON.stringify(e))}var h=(()=>{let e,t=0;return n=>{let r=Date.now();return r===e?t++:(t=0,e=r),`${n.type||p(n.label)}-${r}-${t}`}})(),g=[`text`,`number`,`file`,`date`,`select`,`textarea`,`autocomplete`];function _(e){return e.name||=h(e),g.includes(e.type)&&(e.className=e.className||`form-control`),e}function v(e,t){let n=e&&e.controls;if(!n)return[_({type:t,label:t})];let r=(n.opts&&n.opts.inputSets||[]).find(e=>(e.name||p(e.label))===t);if(r){let e=[];return r.showHeader&&e.push(_({type:`header`,subtype:`h2`,id:r.name,label:r.label})),(r.fields||[]).forEach(t=>e.push(_(m(t)))),e}let i=n.custom&&n.custom.lookup(t);if(i){let e=m(i);return e.label=n.custom.label(t),[_(e)]}let a=n.getClass&&n.getClass(t);return[_({type:t,label:a&&typeof a.label==`function`?a.label(t):t})]}function y(e,t){let n=e&&e.controls;return n&&Array.isArray(n.controlList)?n.controlList.filter(e=>e!==`group`).map(e=>{let t=n.allControls&&n.allControls[e];return{type:e,label:(t&&t.textContent?t.textContent.trim():``)||e}}):(t&&t.getRegistered?t.getRegistered():[]).filter(e=>e!==`group`).map(e=>({type:e,label:e}))}function b(e,t,n){let r=document.createElement(`li`);r.className=`group-child`,r.dataset.index=String(t);let i=document.createElement(`span`);i.className=`gc-handle`,i.textContent=`⋮⋮`;let a=document.createElement(`span`);a.className=`gc-label`,a.textContent=`${e.type}: ${e.label||e.name||``}`;let o=(e,n,r,i)=>{let a=document.createElement(`button`);return a.type=`button`,a.className=`gc-btn ${e} ${n}`,a.title=r,a.setAttribute(`aria-label`,r),a.addEventListener(`click`,()=>i(t)),a},s=document.createElement(`div`);return s.className=`group-item-preview`,s.append(i,a,o(`gc-edit`,`formbuilder-icon-pencil`,`Edit`,n.onEdit),o(`gc-duplicate`,`formbuilder-icon-copy`,`Duplicate`,n.onDuplicate),o(`gc-remove`,`formbuilder-icon-cancel`,`Remove`,n.onRemove)),r.append(s),r}function x(e){let t=e;for(;t;){if(t.fbInstance)return t.fbInstance;t=t.parentElement}return null}function S(e,t,n){let{state:r,hidden:i}=e._groupEditor,a=e._findInstance();if(!a||typeof a.generateAdvFields!=`function`)return;let o=n.querySelector(`.group-child-edit`);if(o){o.remove();return}let s=r.get()[t],c=a.generateAdvFields(s),l=document.createElement(`div`);l.className=`group-child-edit`,l.appendChild(c),n.appendChild(l);let d=()=>{let e=a.getAttrVals(c);r.updateAt(t,{type:s.type,...e}),u(i,r)};c.addEventListener(`input`,d),c.addEventListener(`change`,d)}window.fbControls||(window.fbControls=[]);function C(e,t){let n=e;e.jsonAttrs&&e.jsonAttrs.set(`group`,[`fields`]);class o extends e{static get definition(){return{icon:`▦`,i18n:{default:`Group`},defaultAttrs:{repeatable:{label:`Repeatable`,type:`checkbox`,value:!1},min:{label:`Min instances`,type:`number`,value:1},max:{label:`Max instances`,type:`number`,value:``},addLabel:{label:`Add button text`,type:`text`,value:`Add another`},fields:{label:``,type:`hidden`,value:`[]`}},disabledAttrs:[`value`,`placeholder`]}}get childFields(){return r(this.config.fields)}build(){return this.preview?this.buildEditor():this.buildRender()}buildEditor(){return d(this)}buildRender(){return i(this)}onRender(){if(this.preview)return this.onRenderEditor();if(this._rendered)return;this._rendered=!0;let e=window.jQuery;this.config.repeatable?this.renderRepeatable(e):a(this._groupHost,this.childFields,e)}renderRepeatable(e){s(this._groupHost,{fields:this.childFields,groupName:this.config.name,min:this.config.min,max:this.config.max,addLabel:this.config.addLabel},e)}onRenderEditor(){this._groupEditor.hidden=l(this.element);let{state:e,list:t,pickerMount:r}=this._groupEditor,i=()=>{u(this._groupEditor.hidden,e),this.onRenderEditor()};t.replaceChildren(),e.get().forEach((n,r)=>{t.appendChild(b(n,r,{onEdit:e=>this.openChildEditor(e),onDuplicate:t=>{e.add(e.get()[t]),i()},onRemove:t=>{e.removeAt(t),i()}}))});let a=window.jQuery;a&&a.fn.sortable&&a(t).sortable({handle:`.gc-handle`,items:`> li.group-child`,update:(n,r)=>{let o=Number(r.item.data(`startIndex`)),s=a(t).children().index(r.item);!Number.isNaN(o)&&o!==s&&(e.moveTo(o,s),i())},start:(e,t)=>t.item.data(`startIndex`,t.item.index())});let o=this._findInstance(),s=y(o,n);r.replaceChildren(),r.appendChild(f(s,t=>{v(o,t).forEach(t=>e.add(t)),i()}))}_findInstance(){return x(this.element)}openChildEditor(e){let t=this._groupEditor.list.querySelector(`li.group-child[data-index="${e}"]`);t&&S(this,e,t)}}return e.register(`group`,o),o}window.fbControls.push(C),n(t),e.VERSION=`1.0.1`});
|
package/package.json
CHANGED