builder-settings-types 0.0.113 → 0.0.115
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"/>
|
|
@@ -94,7 +94,7 @@
|
|
|
94
94
|
}
|
|
95
95
|
`,document.head.appendChild(l)}return i.appendChild(s),i.appendChild(n),t.appendChild(i),t}setDetectChange(t){this.detectChangeCallback=t}}const tt=`<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
96
96
|
<path d="M1.25 7.5H1.2575M4.625 7.5H4.6325M11.375 7.5H11.3825M8 7.5H8.0075M14.75 7.5H14.7575M14.75 14.25V13.65C14.75 12.8099 14.75 12.3899 14.5865 12.069C14.4427 11.7868 14.2132 11.5573 13.931 11.4135C13.6101 11.25 13.1901 11.25 12.35 11.25H3.65C2.80992 11.25 2.38988 11.25 2.06901 11.4135C1.78677 11.5573 1.5573 11.7868 1.41349 12.069C1.25 12.3899 1.25 12.8099 1.25 13.65V14.25M14.75 0.75V1.35C14.75 2.19008 14.75 2.61012 14.5865 2.93099C14.4427 3.21323 14.2132 3.4427 13.931 3.58651C13.6101 3.75 13.1901 3.75 12.35 3.75H3.65C2.80992 3.75 2.38988 3.75 2.06901 3.58651C1.78677 3.4427 1.5573 3.21323 1.41349 2.93099C1.25 2.61012 1.25 2.19008 1.25 1.35V0.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
97
|
-
</svg>`;class et extends m{constructor(t={}){super(t),this.inputType="number",this.inputValues={}}draw(){const t=document.createElement("div");if(t.classList.add("gap-settings-container"),this.props.title||this.props.title===void 0){const e=document.createElement("div");e.classList.add("gap-settings-title"),e.textContent=this.props.title||"Spacing",t.appendChild(e)}if(this.props.rowGap!==!1){const e=this.createGapInput("Row Gap",this.value??0);t.appendChild(e),this.inputValues["Row Gap"]=this.value??0}if(this.props.columnGap!==!1){const e=this.createGapInput("Column Gap",this.value??0);t.appendChild(e),this.inputValues["Column Gap"]=this.value??0}if(this.props.rowGap===void 0&&this.props.columnGap===void 0){const e=this.createGapInput("Gap",this.value??0);t.appendChild(e),this.inputValues.Gap=this.value??0}return t}createGapInput(t,e){const i=document.createElement("div");i.classList.add("gap-input-wrapper");const s=document.createElement("div");s.classList.add("gap-label-container");const n=document.createElement("div");n.classList.add("gap-setting-icon"),n.innerHTML=this.props.icon||tt,s.appendChild(n);const a=document.createElement("label");a.classList.add("gap-input-label"),a.textContent=t,s.appendChild(a),i.appendChild(s);const o=u=>{this.props.minValue!==void 0&&(u.min=String(this.props.minValue)),this.props.maxValue!==void 0&&(u.max=String(this.props.maxValue)),this.props.className&&u.classList.add(this.props.className),u.addEventListener("input",()=>{var f;const p=this.props.minValue??0,g=this.props.maxValue??100;let d=Number(u.value);d<p&&(d=p),d>g&&(d=g),u.value=String(d),this.value=d,this.inputValues[t]=d,console.log(`Gap Setting (${t}): ${d}${this.props.suffix||""}`),(f=this.onChange)==null||f.call(this,d)})},l=this.createInput({value:e,inputType:this.inputType,inputClassName:"gap-setting-input "+(this.props.inputClassName||""),wrapperClassName:"gap-setting-inner-wrapper "+(this.props.wrapperClassName||""),inputCustomizer:o});if(!this.props.suffix||this.props.suffix==="none")return i.appendChild(l),i;l.classList.add("suffix-wrapper");const c=l.querySelector("input.gap-setting-input");c&&(c.style.paddingRight="35px");const r=document.createElement("span");return r.className="suffix-label",r.textContent=this.props.suffix,l.appendChild(r),i.appendChild(l),i}}class it extends m{constructor(t){var e;if(!t.tabs)throw new Error("Tabs array is required for TabsSettings");super(t),this.inputType="tabs",this.tabs=[],this.activeTabId="",this.tabsContainer=null,this.contentContainer=null,this.previousTabId="",this.tabValues=new Map,this.settingGroups=new Map,this.tabs=t.tabs,this.activeTabId=t.activeTabId||((e=this.tabs[0])==null?void 0:e.id)||"",this.previousTabId=this.activeTabId,this.onStateChangeCallback=t.onStateChange,this.value={},this.tabs.forEach(i=>{if(i.custom){const s={};Object.entries(i.settings).forEach(([n,a])=>{a instanceof m?s[n]=a.value:a instanceof C&&(s[n]=a.getValues())}),this.tabValues.set(i.id,s),this.value[i.id]=s}else{const s=new C({title:i.title||i.label,collapsed:i.collapsed,settings:i.settings,description:i.description,icon:i.icon,main:i.main,custom:i.custom,hideCondition:i.hideCondition,onBlur:i.onBlur});this.settingGroups.set(i.id,s);const n=s.getValues();this.tabValues.set(i.id,n),this.value[i.id]=n}}),t.onChange&&this.setOnChange(t.onChange)}draw(){const t=document.createElement("div");t.classList.add("tabs-settings-container"),this.props.className&&t.classList.add(this.props.className);const e=document.createElement("div");e.classList.add("tabs-header"),this.tabsContainer=e,this.tabs.forEach(s=>{const n=document.createElement("button");n.classList.add("tab-button"),s.id===this.activeTabId&&n.classList.add("active"),n.textContent=s.label,n.onclick=()=>this.handleTabClick(s.id),e.appendChild(n)}),t.appendChild(e);const i=document.createElement("div");return i.classList.add("tab-content"),this.contentContainer=i,this.tabs.forEach(s=>{const n=document.createElement("div");if(n.classList.add("tab-panel"),s.id===this.activeTabId&&n.classList.add("active"),s.custom)Object.entries(s.settings).forEach(([a,o])=>{if(o instanceof m)n.appendChild(o.draw()),o.setOnChange(()=>{this.updateTabValues(s.id),this.handleTabChange(s.id)});else if(o instanceof C){const l=o.draw();n.appendChild(l),this.addChangeListeners(o,s.id)}});else{const a=this.settingGroups.get(s.id);if(a){const o=a.draw();n.appendChild(o),this.addChangeListeners(a,s.id)}}i.appendChild(n)}),t.appendChild(i),t}addChangeListeners(t,e){const i=t.settings;Object.values(i).forEach(s=>{s instanceof C?this.addChangeListeners(s,e):s.setOnChange(()=>{this.updateTabValues(e),this.handleTabChange(e)})})}updateTabValues(t){const e=this.tabs.find(i=>i.id===t);if(e)if(e.custom){const i={};Object.entries(e.settings).forEach(([s,n])=>{n instanceof m?i[s]=n.value:n instanceof C&&(i[s]=n.getValues())}),this.tabValues.set(t,i),this.value={...this.value,[t]:i}}else{const i=this.settingGroups.get(t);if(i){const s=i.getValues();this.tabValues.set(t,s),this.value={...this.value,[t]:s}}}}handleTabChange(t){var
|
|
97
|
+
</svg>`;class et extends m{constructor(t={}){super(t),this.inputType="number",this.inputValues={}}draw(){const t=document.createElement("div");if(t.classList.add("gap-settings-container"),this.props.title||this.props.title===void 0){const e=document.createElement("div");e.classList.add("gap-settings-title"),e.textContent=this.props.title||"Spacing",t.appendChild(e)}if(this.props.rowGap!==!1){const e=this.createGapInput("Row Gap",this.value??0);t.appendChild(e),this.inputValues["Row Gap"]=this.value??0}if(this.props.columnGap!==!1){const e=this.createGapInput("Column Gap",this.value??0);t.appendChild(e),this.inputValues["Column Gap"]=this.value??0}if(this.props.rowGap===void 0&&this.props.columnGap===void 0){const e=this.createGapInput("Gap",this.value??0);t.appendChild(e),this.inputValues.Gap=this.value??0}return t}createGapInput(t,e){const i=document.createElement("div");i.classList.add("gap-input-wrapper");const s=document.createElement("div");s.classList.add("gap-label-container");const n=document.createElement("div");n.classList.add("gap-setting-icon"),n.innerHTML=this.props.icon||tt,s.appendChild(n);const a=document.createElement("label");a.classList.add("gap-input-label"),a.textContent=t,s.appendChild(a),i.appendChild(s);const o=u=>{this.props.minValue!==void 0&&(u.min=String(this.props.minValue)),this.props.maxValue!==void 0&&(u.max=String(this.props.maxValue)),this.props.className&&u.classList.add(this.props.className),u.addEventListener("input",()=>{var f;const p=this.props.minValue??0,g=this.props.maxValue??100;let d=Number(u.value);d<p&&(d=p),d>g&&(d=g),u.value=String(d),this.value=d,this.inputValues[t]=d,console.log(`Gap Setting (${t}): ${d}${this.props.suffix||""}`),(f=this.onChange)==null||f.call(this,d)})},l=this.createInput({value:e,inputType:this.inputType,inputClassName:"gap-setting-input "+(this.props.inputClassName||""),wrapperClassName:"gap-setting-inner-wrapper "+(this.props.wrapperClassName||""),inputCustomizer:o});if(!this.props.suffix||this.props.suffix==="none")return i.appendChild(l),i;l.classList.add("suffix-wrapper");const c=l.querySelector("input.gap-setting-input");c&&(c.style.paddingRight="35px");const r=document.createElement("span");return r.className="suffix-label",r.textContent=this.props.suffix,l.appendChild(r),i.appendChild(l),i}}class it extends m{constructor(t){var e;if(!t.tabs)throw new Error("Tabs array is required for TabsSettings");super(t),this.inputType="tabs",this.tabs=[],this.activeTabId="",this.tabsContainer=null,this.contentContainer=null,this.previousTabId="",this.tabValues=new Map,this.settingGroups=new Map,this.tabs=t.tabs,this.activeTabId=t.activeTabId||((e=this.tabs[0])==null?void 0:e.id)||"",this.previousTabId=this.activeTabId,this.onStateChangeCallback=t.onStateChange,this.value={},this.tabs.forEach(i=>{if(i.custom){const s={};Object.entries(i.settings).forEach(([n,a])=>{a instanceof m?s[n]=a.value:a instanceof C&&(s[n]=a.getValues())}),this.tabValues.set(i.id,s),this.value[i.id]=s}else{const s=new C({title:i.title||i.label,collapsed:i.collapsed,settings:i.settings,description:i.description,icon:i.icon,main:i.main,custom:i.custom,hideCondition:i.hideCondition,onBlur:i.onBlur});this.settingGroups.set(i.id,s);const n=s.getValues();this.tabValues.set(i.id,n),this.value[i.id]=n}}),t.onChange&&this.setOnChange(t.onChange),t.detectChange&&(this.detectChangeCallback=t.detectChange)}draw(){const t=document.createElement("div");t.classList.add("tabs-settings-container"),this.props.className&&t.classList.add(this.props.className);const e=document.createElement("div");e.classList.add("tabs-header"),this.tabsContainer=e,this.tabs.forEach(s=>{const n=document.createElement("button");n.classList.add("tab-button"),s.id===this.activeTabId&&n.classList.add("active"),n.textContent=s.label,n.onclick=()=>this.handleTabClick(s.id),e.appendChild(n)}),t.appendChild(e);const i=document.createElement("div");return i.classList.add("tab-content"),this.contentContainer=i,this.tabs.forEach(s=>{const n=document.createElement("div");if(n.classList.add("tab-panel"),s.id===this.activeTabId&&n.classList.add("active"),s.custom)Object.entries(s.settings).forEach(([a,o])=>{if(o instanceof m)n.appendChild(o.draw()),o.setOnChange(()=>{this.updateTabValues(s.id),this.handleTabChange(s.id)});else if(o instanceof C){const l=o.draw();n.appendChild(l),this.addChangeListeners(o,s.id)}});else{const a=this.settingGroups.get(s.id);if(a){const o=a.draw();n.appendChild(o),this.addChangeListeners(a,s.id)}}i.appendChild(n)}),t.appendChild(i),t}addChangeListeners(t,e){const i=t.settings;Object.values(i).forEach(s=>{s instanceof C?this.addChangeListeners(s,e):s.setOnChange(()=>{this.updateTabValues(e),this.handleTabChange(e)})})}updateTabValues(t){const e=this.tabs.find(i=>i.id===t);if(e)if(e.custom){const i={};Object.entries(e.settings).forEach(([s,n])=>{n instanceof m?i[s]=n.value:n instanceof C&&(i[s]=n.getValues())}),this.tabValues.set(t,i),this.value={...this.value,[t]:i}}else{const i=this.settingGroups.get(t);if(i){const s=i.getValues();this.tabValues.set(t,s),this.value={...this.value,[t]:s}}}}handleTabChange(t){var s,n;const e=this.tabValues.get(t)||{};(s=this.onStateChangeCallback)==null||s.call(this,t,e);const i={tabId:t,contentValues:e,previousTabId:this.previousTabId};(n=this.onChangeCallback)==null||n.call(this,i),this.detectChangeCallback&&this.detectChangeCallback(i)}handleTabClick(t){var i;if(t===this.activeTabId)return;this.previousTabId=this.activeTabId,this.activeTabId=t;const e=(i=this.tabsContainer)==null?void 0:i.querySelectorAll(".tab-button");if(e==null||e.forEach(s=>{var n;s instanceof HTMLElement&&s.classList.toggle("active",s.textContent===((n=this.tabs.find(a=>a.id===t))==null?void 0:n.label))}),this.contentContainer){const s=this.contentContainer.querySelectorAll(".tab-panel"),n=this.tabs.findIndex(o=>o.id===this.previousTabId),a=this.tabs.findIndex(o=>o.id===t);s.forEach((o,l)=>{o instanceof HTMLElement&&(l===a?(o.classList.add("active"),o.classList.remove("slide-left","slide-right")):l===n?(o.classList.remove("active"),o.classList.add(a>n?"slide-left":"slide-right")):o.classList.remove("active","slide-left","slide-right"))})}this.handleTabChange(t)}setOnChange(t){return this.onChangeCallback=t,this}setDetectChange(t){return this.detectChangeCallback=t,this}setOnStateChange(t){return this.onStateChangeCallback=t,this}}const st=`
|
|
98
98
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
99
99
|
<path d="M5.625 9.5H5.6325M12.375 9.5H12.3825M9 9.5H9.0075M9 12.875H9.0075M9 6.125H9.0075M2.25 6.35L2.25 12.65C2.25 13.9101 2.25 14.5402 2.49524 15.0215C2.71095 15.4448 3.05516 15.789 3.47852 16.0048C3.95982 16.25 4.58988 16.25 5.85 16.25H12.15C13.4101 16.25 14.0402 16.25 14.5215 16.0048C14.9448 15.789 15.289 15.4448 15.5048 15.0215C15.75 14.5402 15.75 13.9101 15.75 12.65V6.35C15.75 5.08988 15.75 4.45982 15.5048 3.97852C15.289 3.55516 14.9448 3.21095 14.5215 2.99524C14.0402 2.75 13.4101 2.75 12.15 2.75L5.85 2.75C4.58988 2.75 3.95982 2.75 3.47852 2.99524C3.05516 3.21095 2.71095 3.55516 2.49524 3.97852C2.25 4.45982 2.25 5.08988 2.25 6.35Z" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
100
100
|
</svg>
|
|
@@ -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">
|
|
@@ -1163,7 +1153,7 @@ class ut extends m {
|
|
|
1163
1153
|
const n = s.getValues();
|
|
1164
1154
|
this.tabValues.set(i.id, n), this.value[i.id] = n;
|
|
1165
1155
|
}
|
|
1166
|
-
}), t.onChange && this.setOnChange(t.onChange);
|
|
1156
|
+
}), t.onChange && this.setOnChange(t.onChange), t.detectChange && (this.detectChangeCallback = t.detectChange);
|
|
1167
1157
|
}
|
|
1168
1158
|
draw() {
|
|
1169
1159
|
const t = document.createElement("div");
|
|
@@ -1228,13 +1218,15 @@ class ut extends m {
|
|
|
1228
1218
|
}
|
|
1229
1219
|
}
|
|
1230
1220
|
handleTabChange(t) {
|
|
1231
|
-
var
|
|
1221
|
+
var s, n;
|
|
1232
1222
|
const e = this.tabValues.get(t) || {};
|
|
1233
|
-
(
|
|
1223
|
+
(s = this.onStateChangeCallback) == null || s.call(this, t, e);
|
|
1224
|
+
const i = {
|
|
1234
1225
|
tabId: t,
|
|
1235
1226
|
contentValues: e,
|
|
1236
1227
|
previousTabId: this.previousTabId
|
|
1237
|
-
}
|
|
1228
|
+
};
|
|
1229
|
+
(n = this.onChangeCallback) == null || n.call(this, i), this.detectChangeCallback && this.detectChangeCallback(i);
|
|
1238
1230
|
}
|
|
1239
1231
|
handleTabClick(t) {
|
|
1240
1232
|
var i;
|
|
@@ -1262,6 +1254,9 @@ class ut extends m {
|
|
|
1262
1254
|
setOnChange(t) {
|
|
1263
1255
|
return this.onChangeCallback = t, this;
|
|
1264
1256
|
}
|
|
1257
|
+
setDetectChange(t) {
|
|
1258
|
+
return this.detectChangeCallback = t, this;
|
|
1259
|
+
}
|
|
1265
1260
|
setOnStateChange(t) {
|
|
1266
1261
|
return this.onStateChangeCallback = t, this;
|
|
1267
1262
|
}
|
|
@@ -1702,5 +1697,5 @@ export {
|
|
|
1702
1697
|
dt as Toggle,
|
|
1703
1698
|
U as UploadSetting,
|
|
1704
1699
|
ht as WidthSetting,
|
|
1705
|
-
|
|
1700
|
+
T as iterateSettings
|
|
1706
1701
|
};
|
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> {
|
|
@@ -542,6 +537,7 @@ export declare class TabsSettings<T = any> extends Setting<T, TabsSettingsProps<
|
|
|
542
537
|
private contentContainer;
|
|
543
538
|
private onChangeCallback?;
|
|
544
539
|
private onStateChangeCallback?;
|
|
540
|
+
private detectChangeCallback?;
|
|
545
541
|
private previousTabId;
|
|
546
542
|
private tabValues;
|
|
547
543
|
private settingGroups;
|
|
@@ -552,6 +548,7 @@ export declare class TabsSettings<T = any> extends Setting<T, TabsSettingsProps<
|
|
|
552
548
|
private handleTabChange;
|
|
553
549
|
private handleTabClick;
|
|
554
550
|
setOnChange(onChange: (value: T) => void): this;
|
|
551
|
+
setDetectChange(detectChange: (value: T | undefined) => void): this;
|
|
555
552
|
setOnStateChange(onStateChange: (tabId: string, values: Record<string, any>) => void): this;
|
|
556
553
|
}
|
|
557
554
|
|
|
@@ -559,6 +556,7 @@ declare interface TabsSettingsProps<T = TabChangeValue> extends SettingProps<T>
|
|
|
559
556
|
tabs: TabItem[];
|
|
560
557
|
activeTabId?: string;
|
|
561
558
|
onChange?: (value: T) => void;
|
|
559
|
+
detectChange?: (value: T | undefined) => void;
|
|
562
560
|
onStateChange?: (tabId: string, values: Record<string, any>) => void;
|
|
563
561
|
className?: string;
|
|
564
562
|
}
|
package/package.json
CHANGED