builder-settings-types 0.0.113 → 0.0.114
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.
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
<path d="M8 5.33333V8M8 10.6667H8.00667M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8Z"
|
|
13
13
|
stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
|
14
14
|
</svg>
|
|
15
|
-
`,p.title=this.description,n.insertBefore(p,a)}}else{if(!r){const p=document.createElement("div");p.className="setting-group-description",p.textContent=this.description,o.insertBefore(p,o.firstChild)}u&&u.remove()}};if(e.onclick=l,e.onkeydown=r=>{(r.key==="Enter"||r.key===" ")&&(r.preventDefault(),l())},Object.keys(this.settings).length>0){for(const r in this.settings)if(this.settings.hasOwnProperty(r)){const u=this.settings[r];o.appendChild(u.draw())}}else{const r=document.createElement("div");r.className="setting-group-empty",r.textContent="No settings in this group",o.appendChild(r)}return e.appendChild(i),e.appendChild(n),t.appendChild(e),t.appendChild(o),this.elementRef=t,this.pendingBlurHandler&&(this.setupBlurHandlers(),this.pendingBlurHandler=null),t}collapse(){if(!this.elementRef||this.isCollapsed)return;const t=this.elementRef.querySelector(".setting-group-content"),e=this.elementRef.querySelector(".setting-group-arrow"),i=this.elementRef.querySelector(".setting-group-title");t&&e&&i&&(this.isCollapsed=!0,t.classList.add("collapsed"),e.classList.add("rotated"),i.setAttribute("aria-expanded","false"))}expand(){if(!this.elementRef||!this.isCollapsed)return;const t=this.elementRef.querySelector(".setting-group-content"),e=this.elementRef.querySelector(".setting-group-arrow"),i=this.elementRef.querySelector(".setting-group-title");t&&e&&i&&(this.isCollapsed=!1,t.classList.remove("collapsed"),e.classList.remove("rotated"),i.setAttribute("aria-expanded","true"))}updateVisibility(){this.elementRef&&this.hideCondition&&(this.elementRef.style.display=this.hideCondition()?"none":"")}toggle(){this.isHidden?this.show():this.hide()}};b.hiddenElements=new Set;let C=b;function
|
|
15
|
+
`,p.title=this.description,n.insertBefore(p,a)}}else{if(!r){const p=document.createElement("div");p.className="setting-group-description",p.textContent=this.description,o.insertBefore(p,o.firstChild)}u&&u.remove()}};if(e.onclick=l,e.onkeydown=r=>{(r.key==="Enter"||r.key===" ")&&(r.preventDefault(),l())},Object.keys(this.settings).length>0){for(const r in this.settings)if(this.settings.hasOwnProperty(r)){const u=this.settings[r];o.appendChild(u.draw())}}else{const r=document.createElement("div");r.className="setting-group-empty",r.textContent="No settings in this group",o.appendChild(r)}return e.appendChild(i),e.appendChild(n),t.appendChild(e),t.appendChild(o),this.elementRef=t,this.pendingBlurHandler&&(this.setupBlurHandlers(),this.pendingBlurHandler=null),t}collapse(){if(!this.elementRef||this.isCollapsed)return;const t=this.elementRef.querySelector(".setting-group-content"),e=this.elementRef.querySelector(".setting-group-arrow"),i=this.elementRef.querySelector(".setting-group-title");t&&e&&i&&(this.isCollapsed=!0,t.classList.add("collapsed"),e.classList.add("rotated"),i.setAttribute("aria-expanded","false"))}expand(){if(!this.elementRef||!this.isCollapsed)return;const t=this.elementRef.querySelector(".setting-group-content"),e=this.elementRef.querySelector(".setting-group-arrow"),i=this.elementRef.querySelector(".setting-group-title");t&&e&&i&&(this.isCollapsed=!1,t.classList.remove("collapsed"),e.classList.remove("rotated"),i.setAttribute("aria-expanded","true"))}updateVisibility(){this.elementRef&&this.hideCondition&&(this.elementRef.style.display=this.hideCondition()?"none":"")}toggle(){this.isHidden?this.show():this.hide()}};b.hiddenElements=new Set;let C=b;function H(h){if(h===null||typeof h!="object")return h;if(h instanceof Date)return new Date(h.getTime());if(Array.isArray(h)){const i=[];for(let s=0;s<h.length;s++)i[s]=H(h[s]);return i}const t={};for(const i in h)Object.prototype.hasOwnProperty.call(h,i)&&(t[i]=H(h[i]));const e=Object.getPrototypeOf(h);return e!==Object.prototype&&Object.setPrototypeOf(t,e),t}function W(h){switch(h){case"number":return 0;case"text":return"";case"select":return null;case"color":return"#000000";case"date":return new Date().toISOString().split("T")[0];case"button":return"";default:return""}}class m{constructor(t={}){this.props=t,this.id=t.id||B(),this.value=this.props.default,this.title=t.title||""}destroy(){throw new Error("Method not implemented.")}setOnChange(t){return this.onChange=t,this}setValue(t){this.value=t,this.inputEl&&(this.inputEl.value=String(t)),this.onChange&&this.onChange(t),this.props.detectChange&&this.props.detectChange(t)}clone(){const t=this.constructor,e=H(this.props),i=new t(e);return i.value=H(this.value),i}createInput(t){t={...this.props.inputProps,...t};const e=document.createElement("div");if(e.className=t.wrapperClassName||"",t.title||t.icon){const a=document.createElement("div");if(a.className="icon-container",t.icon){const o=this.createIcon(t.icon,t.iconClassName);a.appendChild(o)}if(t.title){const o=this.createLabel(t.title,t.labelClassName);a.appendChild(o)}e.appendChild(a)}const i=document.createElement("div");i.className=t.wrapperClassName||"";const s=document.createElement("input");this.inputEl=s,s.value=String(t.value||W(t.inputType)),s.type=t.inputType,s.placeholder=t.placeholder||"",s.className=t.inputClassName||"";const n=a=>{const o=a.target;let l=o.value;switch(t.inputType){case"number":l=Number(o.value);break;case"color":l=o.value;break;case"date":l=o.value;break;case"select":l=o.value;break;case"text":l=o.value;break;case"button":l=o.value;break;default:l=o.value}this.value=l,this.onChange&&this.onChange(this.value),this.props.detectChange&&this.props.detectChange(this.value)};return s.addEventListener("input",n),s.addEventListener("change",n),t.inputCustomizer&&t.inputCustomizer(s),i.appendChild(s),e.appendChild(i),e}createLabel(t,e){const i=document.createElement("span");return i.textContent=t,i.className="input-label "+(e||""),i}createIcon(t,e){const i=document.createElement("span");return i.className="input-icon "+(e||""),i.innerHTML=t,i}}class S extends m{constructor(t={}){super(t),this.inputType="text",t.onChange&&this.setOnChange(t.onChange)}draw(){const t=e=>{this.props.maxLength!==void 0&&(e.maxLength=this.props.maxLength),this.props.className&&e.classList.add(this.props.className)};return this.createInput({value:this.value,inputType:this.inputType,title:this.props.title,placeholder:this.props.placeholder,icon:this.props.icon,inputClassName:"string-setting-input "+(this.props.inputClassName||""),wrapperClassName:"string-setting-wrapper "+(this.props.wrapperClassName||""),inputCustomizer:t})}}const I="<svg xmlns='http://www.w3.org/2000/svg' width='18' height='19' viewBox='0 0 18 19' fill='none'><path d='M8.99999 15.8542C9.79613 16.5667 10.8475 17 12 17C14.4853 17 16.5 14.9853 16.5 12.5C16.5 10.4248 15.0953 8.67769 13.1849 8.15763M4.81513 8.15762C2.9047 8.67768 1.5 10.4248 1.5 12.5C1.5 14.9853 3.51472 17 6 17C8.48528 17 10.5 14.9853 10.5 12.5C10.5 11.9146 10.3882 11.3554 10.1849 10.8424M13.5 6.5C13.5 8.98528 11.4853 11 9 11C6.51472 11 4.5 8.98528 4.5 6.5C4.5 4.01472 6.51472 2 9 2C11.4853 2 13.5 4.01472 13.5 6.5Z' stroke='#667085' stroke-linecap='round' stroke-linejoin='round'/></svg>";class T extends S{constructor(t){super({...t,icon:t.icon||I,title:t.title||"Color"}),this.inputType="color",this.detectChange=t.detectChange}hexToRgb(t){t=t.replace("#","");const e=parseInt(t.substring(0,2),16),i=parseInt(t.substring(2,4),16),s=parseInt(t.substring(4,6),16);return`${e}, ${i}, ${s}`}rgbToHex(t){const[e,i,s]=t.split(",").map(a=>parseInt(a.trim()));if(isNaN(e)||isNaN(i)||isNaN(s))return"#000000";const n=a=>{const o=a.toString(16);return o.length===1?"0"+o:o};return`#${n(e)}${n(i)}${n(s)}`}draw(){const t=document.createElement("div");t.className="color-setting-wrapper";const e=document.createElement("div");e.className="icon-container";const i=this.createIcon(this.props.icon||I),s=this.createLabel(this.title||"Color");e.appendChild(i),e.appendChild(s);const n=document.createElement("div");n.className="color-input-wrapper";const a=p=>{const g=p.value.split(",").map(O=>parseInt(O.trim()));if(g.length!==3||g.some(isNaN))return p.style.border="1px solid red",!1;const[d,f,v]=g,k=d>=0&&d<=255&&f>=0&&f<=255&&v>=0&&v<=255;return p.style.border=k?"":"1px solid red",k},o=document.createElement("div");o.className="color-preview",o.style.backgroundColor=this.value?`rgb(${this.value})`:"";const l=this.createInput({value:this.value,inputType:"text",inputClassName:"color-text-input"}),c=l.querySelector("input"),r=this.createInput({value:this.value?this.rgbToHex(this.value):"",inputType:this.inputType,inputClassName:"color-picker"}),u=r.querySelector("input");return c.oninput=p=>{var d;let g=p.target.value.trim();a(c)&&(this.value=g,(d=this.onChange)==null||d.call(this,g),u.value=this.rgbToHex(g),o.style.backgroundColor=`rgb(${g})`)},u.oninput=p=>{var f,v;const g=p.target.value,d=this.hexToRgb(g);this.value=d,(f=this.onChange)==null||f.call(this,d),(v=this.detectChange)==null||v.call(this,d),c.value=d,o.style.backgroundColor=`rgb(${d})`},u.onchange=p=>{var f,v;const g=p.target.value,d=this.hexToRgb(g);this.value=d,(f=this.onChange)==null||f.call(this,d),(v=this.detectChange)==null||v.call(this,d),c.value=d,o.style.backgroundColor=`rgb(${d})`},n.appendChild(o),n.appendChild(r),n.appendChild(l),t.appendChild(e),t.appendChild(n),this.value&&(c.value=this.value,u.value=this.rgbToHex(this.value),o.style.backgroundColor=`rgb(${this.value})`),t}}class w extends m{constructor(t={}){super(t),this.inputType="number",this.inputElement=null}draw(){const t=s=>{this.props.minValue!==void 0&&(s.min=String(this.props.minValue)),this.props.maxValue!==void 0&&(s.max=String(this.props.maxValue)),this.props.className&&s.classList.add(this.props.className),s.addEventListener("input",()=>{var l;const n=this.props.minValue??Number.MIN_SAFE_INTEGER,a=this.props.maxValue??Number.MAX_SAFE_INTEGER;let o=Number(s.value);o<n&&(o=n),o>a&&(o=a),s.value=String(o),(l=this.onChange)==null||l.call(this,o)})},e=this.createInput({value:this.value,inputType:this.inputType,title:this.props.title,icon:this.props.icon,inputClassName:"number-setting-input "+(this.props.inputClassName||""),wrapperClassName:"number-setting-wrapper "+(this.props.wrapperClassName||""),inputCustomizer:t});if(this.inputElement=e.querySelector("input.number-setting-input"),!this.props.suffix||this.props.suffix==="none")return e;e.classList.add("suffix-wrapper"),this.inputElement&&(this.inputElement.style.paddingRight="35px");const i=document.createElement("span");return i.className="suffix-label",i.textContent=this.props.suffix,e.appendChild(i),e}setValue(t){const e=this.validateValue(t);super.setValue(e),this.inputElement&&(this.inputElement.value=String(e??""))}validateValue(t){(t==null||isNaN(t))&&(t=this.props.default??0);const e=this.props.minValue??Number.MIN_SAFE_INTEGER,i=this.props.maxValue??Number.MAX_SAFE_INTEGER;let s=Number(t);return s<e&&(s=e),s>i&&(s=i),s}}class L extends w{constructor(t){super({...t,minValue:0,maxValue:100,icon:t.icon||$,title:t.title||"Opacity"}),this.inputType="number"}}const $=`
|
|
16
16
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
17
17
|
<path d="M3.69749 15.365C3.54749 15.365 3.40502 15.305 3.30002 15.2C1.77752 13.6775 0.9375 11.6525 0.9375 9.5C0.9375 5.0525 4.5525 1.4375 9 1.4375C11.1525 1.4375 13.1775 2.2775 14.7 3.8C14.805 3.905 14.865 4.0475 14.865 4.1975C14.865 4.3475 14.805 4.49 14.7 4.595L4.09502 15.2C3.99002 15.305 3.84749 15.365 3.69749 15.365ZM9 2.5625C5.175 2.5625 2.0625 5.675 2.0625 9.5C2.0625 11.165 2.64751 12.74 3.71251 13.9925L13.4925 4.2125C12.24 3.1475 10.665 2.5625 9 2.5625Z" fill="#667085"/>
|
|
18
18
|
<path d="M9.00014 17.5623C6.84764 17.5623 4.82266 16.7223 3.30016 15.1998C3.19516 15.0948 3.13513 14.9523 3.13513 14.8023C3.13513 14.6523 3.19516 14.5098 3.30016 14.4048L13.9051 3.79984C14.1226 3.58234 14.4826 3.58234 14.7001 3.79984C16.2226 5.32234 17.0626 7.34734 17.0626 9.49984C17.0626 13.9473 13.4476 17.5623 9.00014 17.5623ZM4.50764 14.7873C5.76014 15.8523 7.33514 16.4373 9.00014 16.4373C12.8251 16.4373 15.9376 13.3248 15.9376 9.49984C15.9376 7.83484 15.3526 6.25984 14.2876 5.00734L4.50764 14.7873Z" fill="#667085"/>
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
`))}draw(){const t=document.createElement("div");t.className="upload-setting-wrapper",t.setAttribute("data-setting-id",this.id),t.addEventListener("focusout",c=>{var r;c.relatedTarget&&t.contains(c.relatedTarget)||(r=this.onBlur)==null||r.call(this)},!0);const e=!!(this.props.title||this.props.icon);if(e||t.classList.add("no-label"),e){const c=document.createElement("div");if(c.className="icon-title-container",this.props.icon){const r=this.createIcon(this.props.icon);c.appendChild(r)}if(this.props.title){const r=this.createLabel(this.props.title);c.appendChild(r)}t.appendChild(c)}const i=document.createElement("div");i.className="preview-button-container";const s=this.value&&this.value!=="";s||i.classList.add("no-image");const n=document.createElement("div");n.className="preview-placeholder",n.innerHTML=D,this.previewWrapper=document.createElement("div"),this.previewWrapper.className="preview-wrapper",this.previewEl=document.createElement("img"),this.previewEl.className="upload-preview";const a=document.createElement("button");a.className="delete-button",a.type="button",a.title="Delete image",a.innerHTML=z,this.previewWrapper.appendChild(this.previewEl),this.previewWrapper.appendChild(a);const o=document.createElement("button");o.className="upload-button",o.innerHTML=`
|
|
78
78
|
<span class="upload-icon">${N}</span>
|
|
79
79
|
<span class="upload-label">Upload</span>
|
|
80
|
-
`;const l=document.createElement("input");return l.type="file",l.accept="image/*",l.style.display="none",i.appendChild(n),i.appendChild(this.previewWrapper),i.appendChild(o),t.appendChild(i),t.appendChild(l),s?this.updatePreviewState(this.value):this.updatePreviewState(null),a.onclick=c=>{var r;c.stopPropagation(),this.value="",this.updatePreviewState(null),(r=this.onChange)==null||r.call(this,"")},o.onclick=()=>{l.click()},l.onchange=async()=>{var r,u,p,g;const c=(r=l.files)==null?void 0:r[0];if(c)try{o.classList.add("loading"),o.disabled=!0;const d=new FormData,f=this.props.formFieldName||"file";d.append(f,c,c.name);const v=this.props.uploadUrl;if(!v)throw new Error("No uploadUrl provided to UploadSetting.");const k=this.props.requestMethod||"POST",O={...this.props.requestHeaders||{}},E=await(await fetch(v,{method:k,body:d,headers:O})).json();console.log("Upload response:",E);let x;if(this.props.parseResponse)x=this.props.parseResponse(E);else if(x=(u=E==null?void 0:E.data)==null?void 0:u.url,!x)throw new Error("No URL found in response. Provide a parseResponse if needed.");console.log("Final URL:",x),this.value=x,this.updatePreviewState(x),(p=this.onChange)==null||p.call(this,x),(g=this.onBlur)==null||g.call(this)}catch(d){console.error("Error uploading file:",d),this.updatePreviewState(null)}finally{o.classList.remove("loading"),o.disabled=!1}},t}}class Z extends
|
|
80
|
+
`;const l=document.createElement("input");return l.type="file",l.accept="image/*",l.style.display="none",i.appendChild(n),i.appendChild(this.previewWrapper),i.appendChild(o),t.appendChild(i),t.appendChild(l),s?this.updatePreviewState(this.value):this.updatePreviewState(null),a.onclick=c=>{var r;c.stopPropagation(),this.value="",this.updatePreviewState(null),(r=this.onChange)==null||r.call(this,"")},o.onclick=()=>{l.click()},l.onchange=async()=>{var r,u,p,g;const c=(r=l.files)==null?void 0:r[0];if(c)try{o.classList.add("loading"),o.disabled=!0;const d=new FormData,f=this.props.formFieldName||"file";d.append(f,c,c.name);const v=this.props.uploadUrl;if(!v)throw new Error("No uploadUrl provided to UploadSetting.");const k=this.props.requestMethod||"POST",O={...this.props.requestHeaders||{}},E=await(await fetch(v,{method:k,body:d,headers:O})).json();console.log("Upload response:",E);let x;if(this.props.parseResponse)x=this.props.parseResponse(E);else if(x=(u=E==null?void 0:E.data)==null?void 0:u.url,!x)throw new Error("No URL found in response. Provide a parseResponse if needed.");console.log("Final URL:",x),this.value=x,this.updatePreviewState(x),(p=this.onChange)==null||p.call(this,x),(g=this.onBlur)==null||g.call(this)}catch(d){console.error("Error uploading file:",d),this.updatePreviewState(null)}finally{o.classList.remove("loading"),o.disabled=!1}},t}}class Z extends w{constructor(t={}){super({...t,title:t.title||"Height",suffix:"px",minValue:t.minValue??0,maxValue:t.maxValue,icon:t.icon||P}),this.inputType="number"}}const P=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
81
81
|
<path d="M9 14L9 5M9 14L6.75 12.5M9 14L11.25 12.5M9 5L6.75 6.5M9 5L11.25 6.5M15.75 2.75H2.25M15.75 16.25H2.25" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
82
82
|
</svg>`;class J extends w{constructor(t={}){super({...t,title:t.title||"Width",suffix:"px",minValue:t.minValue??0,maxValue:t.maxValue,icon:t.icon||X}),this.inputType="number"}}const X=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
83
83
|
<path d="M4.5 9.5H13.5M4.5 9.5L6 7.25M4.5 9.5L6 11.75M13.5 9.5L12 7.25M13.5 9.5L12 11.75M15.75 16.25V2.75M2.25 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
@@ -139,7 +139,7 @@
|
|
|
139
139
|
<path d="M2.25 2.75H2.2575M2.25 9.5H2.2575M2.25 12.875H2.2575M2.25 6.125H2.2575M5.625 2.75H5.6325M5.625 9.5H5.6325M12.375 2.75H12.3825M12.375 9.5H12.3825M9 2.75H9.0075M9 9.5H9.0075M9 12.875H9.0075M9 6.125H9.0075M15.75 2.75H15.7575M15.75 9.5H15.7575M15.75 12.875H15.7575M15.75 6.125H15.7575M15.75 16.25H2.25" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
140
140
|
</svg>`,gt=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
141
141
|
<path d="M5.625 2.75H5.6325M5.625 9.5H5.6325M5.625 16.25H5.6325M12.375 2.75H12.3825M12.375 9.5H12.3825M12.375 16.25H12.3825M9 2.75H9.0075M9 9.5H9.0075M9 16.25H9.0075M9 12.875H9.0075M9 6.125H9.0075M15.75 2.75H15.7575M15.75 9.5H15.7575M15.75 16.25H15.7575M15.75 12.875H15.7575M15.75 6.125H15.7575M2.25 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
142
|
-
</svg>`;class mt extends C{constructor(t,e,i){super({title:`Tab ${t+1}`,hideCondition:i==null?void 0:i.hideCondition,collapsed:i==null?void 0:i.collapsed,settings:{name:new
|
|
142
|
+
</svg>`;class mt extends C{constructor(t,e,i){super({title:`Tab ${t+1}`,hideCondition:i==null?void 0:i.hideCondition,collapsed:i==null?void 0:i.collapsed,settings:{name:new S({title:"Tab Name",default:`Tab ${t+1}`}),content:new S({title:"Content",default:""})}}),this.onDeleteCallback=e}draw(){const t=super.draw(),e=t.querySelector(".setting-group-arrow");e&&e.parentElement&&e.parentElement.removeChild(e);const i=t.querySelector(".setting-group-title");if(i){const s=document.createElement("div");s.className="tab-delete-container";const n=document.createElement("button");n.className="tab-delete-button",n.innerHTML=`
|
|
143
143
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#f87171" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="trash-icon">
|
|
144
144
|
<polyline points="3 6 5 6 21 6"></polyline>
|
|
145
145
|
<path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path>
|
|
@@ -168,4 +168,4 @@
|
|
|
168
168
|
`:`
|
|
169
169
|
background-color: ${i};
|
|
170
170
|
opacity: ${s/100};
|
|
171
|
-
`}}exports.AlignSetting=R;exports.BackgroundSettingSet=ft;exports.BorderSettingSet=at;exports.ButtonSetting=j;exports.ColorSetting=T;exports.DimensionSetting=q;exports.GapSetting=et;exports.HeaderTypographySettingSet=ht;exports.HeightSetting=Z;exports.MarginSettingGroup=ct;exports.NumberSetting=w;exports.OpacitySetting=L;exports.SelectApiSettings=Y;exports.SelectSetting=V;exports.Setting=m;exports.SettingGroup=C;exports.StringSetting=
|
|
171
|
+
`}}exports.AlignSetting=R;exports.BackgroundSettingSet=ft;exports.BorderSettingSet=at;exports.ButtonSetting=j;exports.ColorSetting=T;exports.DimensionSetting=q;exports.GapSetting=et;exports.HeaderTypographySettingSet=ht;exports.HeightSetting=Z;exports.MarginSettingGroup=ct;exports.NumberSetting=w;exports.OpacitySetting=L;exports.SelectApiSettings=Y;exports.SelectSetting=V;exports.Setting=m;exports.SettingGroup=C;exports.StringSetting=S;exports.TabsContainerGroup=Ct;exports.TabsSettings=it;exports.Toggle=K;exports.UploadSetting=A;exports.WidthSetting=J;exports.iterateSettings=M;
|
|
@@ -5,7 +5,7 @@ let B = (h = 21) => {
|
|
|
5
5
|
t += R[e[h] & 63];
|
|
6
6
|
return t;
|
|
7
7
|
};
|
|
8
|
-
function
|
|
8
|
+
function T(h, t) {
|
|
9
9
|
for (const e in h)
|
|
10
10
|
if (h.hasOwnProperty(e)) {
|
|
11
11
|
const i = h[e];
|
|
@@ -38,7 +38,7 @@ const w = class w {
|
|
|
38
38
|
Object.keys(s).length > 0 && (this.lastChangeTime = Date.now(), t(i), this.updateVisibility(), this.initialValues = i), this.isHandlingChange = !1;
|
|
39
39
|
}, 50));
|
|
40
40
|
};
|
|
41
|
-
return this.changeHandlers.clear(),
|
|
41
|
+
return this.changeHandlers.clear(), T(this.settings, (i, s) => {
|
|
42
42
|
const n = () => {
|
|
43
43
|
this.isHandlingChange || e();
|
|
44
44
|
};
|
|
@@ -53,7 +53,7 @@ const w = class w {
|
|
|
53
53
|
}, this.elementRef && this.setupBlurHandlers(), this;
|
|
54
54
|
}
|
|
55
55
|
setupBlurHandlers() {
|
|
56
|
-
this.elementRef && this.elementRef.removeEventListener("focusout", this.handleBlur), this.elementRef && this.elementRef.addEventListener("focusout", this.handleBlur, !0),
|
|
56
|
+
this.elementRef && this.elementRef.removeEventListener("focusout", this.handleBlur), this.elementRef && this.elementRef.addEventListener("focusout", this.handleBlur, !0), T(this.settings, (t, e) => {
|
|
57
57
|
var i;
|
|
58
58
|
if (e instanceof w)
|
|
59
59
|
e.setOnBlur(this.handleBlur);
|
|
@@ -70,7 +70,7 @@ const w = class w {
|
|
|
70
70
|
// Add the clone method here
|
|
71
71
|
clone() {
|
|
72
72
|
const t = {};
|
|
73
|
-
|
|
73
|
+
T(this.settings, (n, a) => {
|
|
74
74
|
typeof a.clone == "function" ? t[n] = a.clone() : (console.warn(`Setting with key '${n}' does not have a clone method. Copying reference.`), t[n] = a);
|
|
75
75
|
});
|
|
76
76
|
const e = {
|
|
@@ -758,7 +758,7 @@ const _ = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBo
|
|
|
758
758
|
<path d="M4.5 9.5H13.5M4.5 9.5L6 7.25M4.5 9.5L6 11.75M13.5 9.5L12 7.25M13.5 9.5L12 11.75M15.75 16.25V2.75M2.25 16.25V2.75" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
759
759
|
</svg>`, j = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
760
760
|
<path d="M9 14L9 5M9 14L6.75 12.5M9 14L11.25 12.5M9 5L6.75 6.5M9 5L11.25 6.5M15.75 2.75H2.25M15.75 16.25H2.25" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
761
|
-
</svg>`,
|
|
761
|
+
</svg>`, S = `
|
|
762
762
|
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" viewBox="0 0 15 16" fill="none">
|
|
763
763
|
<path d="M5 10.5L7.5 8M7.5 8L10 10.5M7.5 8V13.625M12.5 10.9643C13.2634 10.3338 13.75 9.37996 13.75 8.3125C13.75 6.41402 12.211 4.875 10.3125 4.875C10.1759 4.875 10.0482 4.80375 9.97882 4.68609C9.16379 3.30302 7.65902 2.375 5.9375 2.375C3.34867 2.375 1.25 4.47367 1.25 7.0625C1.25 8.35381 1.77215 9.52317 2.61684 10.371" stroke="#475467" stroke-linecap="round" stroke-linejoin="round"/>
|
|
764
764
|
</svg>
|
|
@@ -780,10 +780,10 @@ class U extends m {
|
|
|
780
780
|
if (!this.previewWrapper || !this.previewEl) return;
|
|
781
781
|
const e = this.previewWrapper.parentElement, i = e == null ? void 0 : e.querySelector(".upload-button"), s = e == null ? void 0 : e.querySelector(".preview-placeholder");
|
|
782
782
|
t && t !== "" ? (this.previewWrapper.classList.add("has-image"), this.previewEl.src = t, this.previewWrapper.style.display = "block", this.previewEl.style.display = "block", s && s instanceof HTMLElement && (s.style.display = "none"), e && e.classList.remove("no-image"), i && (i.innerHTML = `
|
|
783
|
-
<span class="upload-icon">${
|
|
783
|
+
<span class="upload-icon">${S}</span>
|
|
784
784
|
<span class="upload-label">Replace</span>
|
|
785
785
|
`)) : (this.previewWrapper.classList.remove("has-image"), this.previewEl.src = "", this.previewEl.style.display = "none", this.previewWrapper.style.display = "none", s && s instanceof HTMLElement && (s.style.display = "block"), e && e.classList.add("no-image"), i && (i.innerHTML = `
|
|
786
|
-
<span class="upload-icon">${
|
|
786
|
+
<span class="upload-icon">${S}</span>
|
|
787
787
|
<span class="upload-label">Upload</span>
|
|
788
788
|
`));
|
|
789
789
|
}
|
|
@@ -816,7 +816,7 @@ class U extends m {
|
|
|
816
816
|
a.className = "delete-button", a.type = "button", a.title = "Delete image", a.innerHTML = F, this.previewWrapper.appendChild(this.previewEl), this.previewWrapper.appendChild(a);
|
|
817
817
|
const o = document.createElement("button");
|
|
818
818
|
o.className = "upload-button", o.innerHTML = `
|
|
819
|
-
<span class="upload-icon">${
|
|
819
|
+
<span class="upload-icon">${S}</span>
|
|
820
820
|
<span class="upload-label">Upload</span>
|
|
821
821
|
`;
|
|
822
822
|
const l = document.createElement("input");
|
|
@@ -858,26 +858,16 @@ class U extends m {
|
|
|
858
858
|
}, t;
|
|
859
859
|
}
|
|
860
860
|
}
|
|
861
|
-
class rt extends
|
|
861
|
+
class rt extends b {
|
|
862
862
|
constructor(t = {}) {
|
|
863
|
-
super(
|
|
864
|
-
|
|
865
|
-
|
|
863
|
+
super({
|
|
864
|
+
...t,
|
|
865
|
+
title: t.title || "Height",
|
|
866
866
|
suffix: "px",
|
|
867
|
-
minValue: t.
|
|
868
|
-
maxValue: t.
|
|
869
|
-
icon: D
|
|
870
|
-
}), this.
|
|
871
|
-
var i;
|
|
872
|
-
isNaN(e) || (this.value = e, (i = this.onChange) == null || i.call(this, this.value));
|
|
873
|
-
});
|
|
874
|
-
}
|
|
875
|
-
draw() {
|
|
876
|
-
return this.numberSetting.draw();
|
|
877
|
-
}
|
|
878
|
-
setValue(t) {
|
|
879
|
-
const e = t == null || isNaN(t) ? this.props.default ?? 0 : t;
|
|
880
|
-
super.setValue(e), this.numberSetting.setValue(e);
|
|
867
|
+
minValue: t.minValue ?? 0,
|
|
868
|
+
maxValue: t.maxValue,
|
|
869
|
+
icon: t.icon || D
|
|
870
|
+
}), this.inputType = "number";
|
|
881
871
|
}
|
|
882
872
|
}
|
|
883
873
|
const D = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
@@ -1702,5 +1692,5 @@ export {
|
|
|
1702
1692
|
dt as Toggle,
|
|
1703
1693
|
U as UploadSetting,
|
|
1704
1694
|
ht as WidthSetting,
|
|
1705
|
-
|
|
1695
|
+
T as iterateSettings
|
|
1706
1696
|
};
|
package/dist/index.d.ts
CHANGED
|
@@ -204,17 +204,12 @@ export declare class HeaderTypographySettingSet extends SettingGroup<{
|
|
|
204
204
|
getCssCode(): string;
|
|
205
205
|
}
|
|
206
206
|
|
|
207
|
-
export declare class HeightSetting extends
|
|
208
|
-
inputType:
|
|
209
|
-
private numberSetting;
|
|
207
|
+
export declare class HeightSetting extends NumberSetting {
|
|
208
|
+
inputType: InputTypes;
|
|
210
209
|
constructor(props?: HeightSettingProps);
|
|
211
|
-
draw(): HTMLElement;
|
|
212
|
-
setValue(value: number | undefined): void;
|
|
213
210
|
}
|
|
214
211
|
|
|
215
|
-
export declare interface HeightSettingProps extends
|
|
216
|
-
minHeight?: number;
|
|
217
|
-
maxHeight?: number;
|
|
212
|
+
export declare interface HeightSettingProps extends NumberSettingsProps {
|
|
218
213
|
}
|
|
219
214
|
|
|
220
215
|
export declare interface IChangable<T> {
|
package/package.json
CHANGED