builder-settings-types 0.0.99 → 0.0.100
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.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";let
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";let B=(r=21)=>{let t="",e=crypto.getRandomValues(new Uint8Array(r|=0));for(;r--;)t+=A[e[r]&63];return t};function T(r,t){for(const e in r)if(r.hasOwnProperty(e)){const i=r[e];t(e,i)}}const b=class b{constructor(t){this.elementRef=null,this.isHidden=!1,this.custom=!1,this.initialValues={},this.changeTimeout=null,this.isHandlingChange=!1,this.changeHandlers=new Set,this.blurTimeout=null,this.lastValues={},this.lastChangeTime=0,this.CHANGE_DEBOUNCE=100,this.handleBlur=()=>{},this.pendingBlurHandler=null,this.id=t.id||B(),this.title=t.title,this.settings=t.settings,this.description=t.description,this.icon=t.icon,this.isCollapsed=t.collapsed??!1,this.isMain=t.main??!1,this.custom=t.custom??!1,this.hideCondition=t.hideCondition,this.onBlur=t.onBlur,Object.assign(this,t.settings),this.initialValues=this.getValues()}static hide(){this.hiddenElements.forEach(t=>{t&&(t.style.display="none")})}static show(){this.hiddenElements.forEach(t=>{t&&(t.style.display="")})}setOnChange(t){this.onChange=t;const e=()=>{this.isHandlingChange||(this.isHandlingChange=!0,this.changeTimeout&&clearTimeout(this.changeTimeout),this.changeTimeout=setTimeout(()=>{const i=this.getValues(),s=this.calculateChanges(this.initialValues,i);Object.keys(s).length>0&&(this.lastChangeTime=Date.now(),t(i),this.updateVisibility(),this.initialValues=i),this.isHandlingChange=!1},50))};return this.changeHandlers.clear(),T(this.settings,(i,s)=>{const n=()=>{this.isHandlingChange||e()};this.changeHandlers.add(n),s instanceof b,s.setOnChange(n)}),this}setOnBlur(t){return this.onBlur=t,this.pendingBlurHandler=t,this.handleBlur=e=>{(e==null?void 0:e.target)instanceof HTMLElement&&e.target.closest(".setting-group")!==this.elementRef||(this.blurTimeout&&clearTimeout(this.blurTimeout),this.blurTimeout=setTimeout(()=>{const i=this.getValues(),s=this.calculateChanges(this.initialValues,i);Object.keys(s).length>0&&Date.now()-this.lastChangeTime>this.CHANGE_DEBOUNCE&&(t(),this.updateVisibility(),this.initialValues=i)},50))},this.elementRef&&this.setupBlurHandlers(),this}setupBlurHandlers(){this.elementRef&&this.elementRef.removeEventListener("focusout",this.handleBlur),this.elementRef&&this.elementRef.addEventListener("focusout",this.handleBlur,!0),T(this.settings,(t,e)=>{if(e instanceof b)e.setOnBlur(this.handleBlur);else{const i=e.draw();i&&(i.addEventListener("focusout",this.handleBlur,!0),i.querySelectorAll("input, select, textarea, button, [tabindex]").forEach(n=>{n.addEventListener("focusout",this.handleBlur,!0)}))}})}cleanup(){this.changeTimeout&&(clearTimeout(this.changeTimeout),this.changeTimeout=null),this.blurTimeout&&(clearTimeout(this.blurTimeout),this.blurTimeout=null),this.elementRef&&this.elementRef.removeEventListener("focusout",this.handleBlur),this.changeHandlers.clear()}calculateChanges(t,e){const i={};for(const s in e)if(e.hasOwnProperty(s))if(typeof e[s]=="object"&&e[s]!==null){const n=this.calculateChanges(t[s]||{},e[s]);Object.keys(n).length>0&&(i[s]=n)}else t[s]!==e[s]&&(i[s]={from:t[s],to:e[s]});return i}hide(){this.elementRef&&(this.elementRef.style.display="none",this.isHidden=!0)}show(){this.elementRef&&(this.elementRef.style.display="",this.isHidden=!1)}getValues(t){if(t===void 0){const e={};for(const i in this.settings)if(this.settings.hasOwnProperty(i)){const s=this.settings[i];s instanceof b?e[i]=s.getValues():e[i]=s.value}return e}else{const e=this.settings[t];return e?e instanceof b?e.getValues():e.value:void 0}}draw(){const t=document.createElement("div");t.className="setting-group",t.id=`setting-group-${this.id}`,b.hiddenElements.add(t),this.hideCondition&&this.hideCondition()&&(t.style.display="none"),this.isMain&&t.classList.add("main-group");const e=document.createElement("div");e.className="setting-group-title",this.isCollapsed&&e.classList.add("collapsed-view"),e.setAttribute("role","button"),e.setAttribute("aria-expanded",(!this.isCollapsed).toString()),e.setAttribute("tabindex","0");const i=document.createElement("div");if(i.className="title-section",this.icon){const h=document.createElement("span");h.className="group-icon",h.innerHTML=this.icon,i.appendChild(h)}this.custom&&t.classList.add("custom_class");const s=document.createElement("h3");s.textContent=this.title,i.appendChild(s);const n=document.createElement("div");if(n.className="actions-section",this.description&&this.isCollapsed){const h=document.createElement("span");h.className="info-marker",h.innerHTML=`
|
|
2
2
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
3
3
|
<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"
|
|
4
4
|
stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
|
|
@@ -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(!h){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=h=>{(h.key==="Enter"||h.key===" ")&&(h.preventDefault(),l())},Object.keys(this.settings).length>0){for(const h in this.settings)if(this.settings.hasOwnProperty(h)){const u=this.settings[h];o.appendChild(u.draw())}}else{const h=document.createElement("div");h.className="setting-group-empty",h.textContent="No settings in this group",o.appendChild(h)}return e.appendChild(i),e.appendChild(n),t.appendChild(e),t.appendChild(o),this.elementRef=t,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 f=b;function G(r){switch(r){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||
|
|
15
|
+
`,p.title=this.description,n.insertBefore(p,a)}}else{if(!h){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=h=>{(h.key==="Enter"||h.key===" ")&&(h.preventDefault(),l())},Object.keys(this.settings).length>0){for(const h in this.settings)if(this.settings.hasOwnProperty(h)){const u=this.settings[h];o.appendChild(u.draw())}}else{const h=document.createElement("div");h.className="setting-group-empty",h.textContent="No settings in this group",o.appendChild(h)}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 f=b;function G(r){switch(r){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)}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||G(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 y 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 V="<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 H extends y{constructor(t){super({...t,icon:t.icon||V,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||V),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(N=>parseInt(N.trim()));if(g.length!==3||g.some(isNaN))return p.style.border="1px solid red",!1;const[d,C,v]=g,L=d>=0&&d<=255&&C>=0&&C<=255&&v>=0&&v<=255;return p.style.border=L?"":"1px solid red",L},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"),h=this.createInput({value:this.value?this.rgbToHex(this.value):"",inputType:this.inputType,inputClassName:"color-picker"}),u=h.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 C,v;const g=p.target.value,d=this.hexToRgb(g);this.value=d,(C=this.onChange)==null||C.call(this,d),(v=this.detectChange)==null||v.call(this,d),c.value=d,o.style.backgroundColor=`rgb(${d})`},u.onchange=p=>{var C,v;const g=p.target.value,d=this.hexToRgb(g);this.value=d,(C=this.onChange)==null||C.call(this,d),(v=this.detectChange)==null||v.call(this,d),c.value=d,o.style.backgroundColor=`rgb(${d})`},n.appendChild(o),n.appendChild(h),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"}draw(){const t=n=>{this.props.minValue!==void 0&&(n.min=String(this.props.minValue)),this.props.maxValue!==void 0&&(n.max=String(this.props.maxValue)),this.props.className&&n.classList.add(this.props.className),n.addEventListener("input",()=>{const a=this.props.minValue??Number.MIN_SAFE_INTEGER,o=this.props.maxValue??Number.MAX_SAFE_INTEGER;let l=Number(n.value);l<a&&(l=a),l>o&&(l=o),n.value=String(l)})},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.props.suffix||this.props.suffix==="none")return e;e.classList.add("suffix-wrapper");const i=e.querySelector("input.number-setting-input");i&&(i.style.paddingRight="35px");const s=document.createElement("span");return s.className="suffix-label",s.textContent=this.props.suffix,e.appendChild(s),e}}class E 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"/>
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
<svg xmlns="http://www.w3.org/2000/svg" class="svg-select" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down">
|
|
25
25
|
<polyline points="6 9 12 15 18 9"></polyline>
|
|
26
26
|
</svg>
|
|
27
|
-
`;class
|
|
27
|
+
`;class O extends m{constructor(t={}){if(super(t),this.inputType="select",this._options=[],this.isOpen=!1,this.selectedOptionIndex=null,this.optionsListEl=null,this.svgContainer=null,this.buttonEl=null,this.isLoading=!1,this.container=null,this.clickOutsideListener=null,t.options&&(this._options=[...t.options]),t.getOptions&&this._options.push(...t.getOptions()),t.getOptionsAsync&&(this.isLoading=!0),this.value!==void 0){const e=this._options.findIndex(i=>i.value===this.value);e>=0&&(this.selectedOptionIndex=e)}}createOption(t,e){const i=document.createElement("li");return i.classList.add("select-option"),i.textContent=t.name,i.dataset.index=String(e),this.selectedOptionIndex===e&&i.classList.add("selected"),i}draw(){const t=document.createElement("div");if(t.classList.add("select-container"),this.container=t,this.props.icon||this.props.title){const n=document.createElement("div");if(n.className="icon-container",this.props.icon){const a=this.createIcon(this.props.icon);n.appendChild(a)}if(this.props.title){const a=this.createLabel(this.props.title);n.appendChild(a)}t.appendChild(n)}else{const n=document.createElement("div");t.appendChild(n)}const e=document.createElement("div");e.classList.add("select-button"),this.isLoading?e.classList.add("loading"):e.textContent=this.selectedOptionIndex!==null?this._options[this.selectedOptionIndex].name:this.props.placeholder||"Select an option",e.onclick=()=>{var n,a;this.isLoading||(this.isOpen=!this.isOpen,(n=this.optionsListEl)==null||n.classList.toggle("open",this.isOpen),(a=this.svgContainer)==null||a.classList.toggle("open",this.isOpen))},t.appendChild(e),this.buttonEl=e;const i=document.createElement("ul");i.classList.add("select-options"),this._options.forEach((n,a)=>{const o=this.createOption(n,a);o.onclick=l=>this.selectOption(l,a,e),i.appendChild(o)}),t.appendChild(i);const s=document.createElement("div");return s.classList.add("svg-container"),s.innerHTML=j,t.appendChild(s),this.optionsListEl=i,this.svgContainer=s,this.props.getOptionsAsync&&(this.isLoading=!0,this.updateButtonText(),this.props.getOptionsAsync().then(n=>{this._options.push(...n),this.isLoading=!1,this.updateOptionsList(),this.updateButtonText()}).catch(n=>{console.error("Failed to fetch async options:",n),this.isLoading=!1,this.updateButtonText("Failed to load options")})),this.clickOutsideListener&&document.removeEventListener("click",this.clickOutsideListener),this.clickOutsideListener=n=>{var a,o;this.isOpen&&!t.contains(n.target)&&(this.isOpen=!1,(a=this.optionsListEl)==null||a.classList.remove("open"),(o=this.svgContainer)==null||o.classList.remove("open"))},document.addEventListener("click",this.clickOutsideListener),t}selectOption(t,e,i){var n,a,o;const s=this._options[e];s&&(this.value=s.value,(n=this.onChange)==null||n.call(this,this.value),this.selectedOptionIndex=e,this.isOpen=!1,i.textContent=s.name,(a=this.optionsListEl)==null||a.classList.remove("open"),(o=this.svgContainer)==null||o.classList.remove("open"),this.optionsListEl&&this.optionsListEl.querySelectorAll(".select-option").forEach((c,h)=>{h===e?c.classList.add("selected"):c.classList.remove("selected")}))}updateOptionsList(){if(this.optionsListEl){if(this.optionsListEl.innerHTML="",this._options.length===0){const t=document.createElement("li");t.classList.add("select-option","empty-message"),t.textContent="No options available",this.optionsListEl.appendChild(t);return}this._options.forEach((t,e)=>{const i=this.createOption(t,e);i.onclick=s=>{this.buttonEl&&this.selectOption(s,e,this.buttonEl)},this.optionsListEl.appendChild(i)})}}updateButtonText(t){if(!this.buttonEl)return;if(this.isLoading){this.buttonEl.classList.add("loading"),this.buttonEl.textContent=this.props.loadingText||"Loading options...";return}this.buttonEl.classList.remove("loading","error");let e;t?((t.includes("Failed")||t.includes("Error"))&&this.buttonEl.classList.add("error"),e=t):this.selectedOptionIndex!==null&&this._options[this.selectedOptionIndex]?e=this._options[this.selectedOptionIndex].name:e=this.props.placeholder||"Select an option",this.buttonEl.textContent=e}destroy(){this.clickOutsideListener&&(document.removeEventListener("click",this.clickOutsideListener),this.clickOutsideListener=null),super.destroy()}}class R extends m{constructor(t={}){super(t),this.inputType="button",this.value||(this.value="center")}draw(){const t=document.createElement("div");t.className="align-setting-wrapper";const e=document.createElement("label");e.className="align-setting-label",e.textContent=this.title||"Align",t.appendChild(e);const i=document.createElement("div");return i.className="align-options-container",[{name:"left",icon:`
|
|
28
28
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
|
|
29
29
|
<path d="M10.5 7.5C11.1989 7.5 11.5484 7.5 11.824 7.38582C12.1916 7.23358 12.4836 6.94157 12.6358 6.57402C12.75 6.29837 12.75 5.94891 12.75 5.25C12.75 4.55109 12.75 4.20163 12.6358 3.92598C12.4836 3.55843 12.1916 3.26642 11.824 3.11418C11.5484 3 11.1989 3 10.5 3L4.5 3C3.80109 3 3.45163 3 3.17598 3.11418C2.80843 3.26642 2.51642 3.55843 2.36418 3.92597C2.25 4.20163 2.25 4.55109 2.25 5.25C2.25 5.94891 2.25 6.29837 2.36418 6.57402C2.51642 6.94157 2.80843 7.23358 3.17598 7.38582C3.45163 7.5 3.80109 7.5 4.5 7.5L10.5 7.5Z"
|
|
30
30
|
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" viewBox="0 0 15 16" fill="none">
|
|
60
60
|
<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"/>
|
|
61
61
|
</svg>
|
|
62
|
-
`,
|
|
62
|
+
`,I=`
|
|
63
63
|
<svg width="91" height="71" viewBox="0 0 91 71" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
64
64
|
<rect width="91" height="71" rx="4" fill="#F2F4F7"/>
|
|
65
65
|
<path d="M37 31.5L39.5 29M39.5 29L42 31.5M39.5 29V34.625M44.5 31.9643C45.2634 31.3338 45.75 30.38 45.75 29.3125C45.75 27.414 44.211 25.875 42.3125 25.875C42.1759 25.875 42.0482 25.8037 41.9788 25.6861C41.1638 24.303 39.659 23.375 37.9375 23.375C35.3487 23.375 33.25 25.4737 33.25 28.0625C33.25 29.3538 33.7721 30.5232 34.6168 31.371" stroke="#475467" stroke-linecap="round" stroke-linejoin="round"/>
|
|
@@ -74,10 +74,10 @@
|
|
|
74
74
|
`)):(this.previewWrapper.classList.remove("has-image"),this.previewEl.src="",this.previewWrapper.style.display="none",s&&s instanceof HTMLElement&&(s.style.display="none"),i&&(i.innerHTML=`
|
|
75
75
|
<span class="upload-icon">${S}</span>
|
|
76
76
|
<span class="upload-label">Upload</span>
|
|
77
|
-
`))}draw(){const t=document.createElement("div");t.className="upload-setting-wrapper";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 h=this.createIcon(this.props.icon);c.appendChild(h)}if(this.props.title){const h=this.createLabel(this.props.title);c.appendChild(h)}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=
|
|
77
|
+
`))}draw(){const t=document.createElement("div");t.className="upload-setting-wrapper";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 h=this.createIcon(this.props.icon);c.appendChild(h)}if(this.props.title){const h=this.createLabel(this.props.title);c.appendChild(h)}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=I,this.previewWrapper=document.createElement("div"),this.previewWrapper.className="preview-wrapper",this.emptyStateEl=document.createElement("div"),this.emptyStateEl.className="empty-state",this.emptyStateEl.innerHTML=I,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=F,this.previewWrapper.appendChild(this.emptyStateEl),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">${S}</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 h;c.stopPropagation(),this.value="",this.updatePreviewState(null),(h=this.onChange)==null||h.call(this,"")},o.onclick=()=>{l.click()},l.onchange=async()=>{var h,u,p;const c=(h=l.files)==null?void 0:h[0];if(c)try{o.classList.add("loading"),o.disabled=!0;const g=new FormData,d=this.props.formFieldName||"file";g.append(d,c,c.name);const C=this.props.uploadUrl;if(!C)throw new Error("No uploadUrl provided to UploadSetting.");const v=this.props.requestMethod||"POST",
|
|
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 h;c.stopPropagation(),this.value="",this.updatePreviewState(null),(h=this.onChange)==null||h.call(this,"")},o.onclick=()=>{l.click()},l.onchange=async()=>{var h,u,p;const c=(h=l.files)==null?void 0:h[0];if(c)try{o.classList.add("loading"),o.disabled=!0;const g=new FormData,d=this.props.formFieldName||"file";g.append(d,c,c.name);const C=this.props.uploadUrl;if(!C)throw new Error("No uploadUrl provided to UploadSetting.");const v=this.props.requestMethod||"POST",L={...this.props.requestHeaders||{}},k=await(await fetch(C,{method:v,body:g,headers:L})).json();let x;if(this.props.parseResponse)x=this.props.parseResponse(k);else if(x=(u=k==null?void 0:k.data)==null?void 0:u.url,!x)throw new Error("No URL found in response. Provide a parseResponse if needed.");this.value=x,this.updatePreviewState(x),(p=this.onChange)==null||p.call(this,x)}catch(g){console.error("Error uploading file:",g),this.updatePreviewState(null)}finally{o.classList.remove("loading"),o.disabled=!1}},t}}class z extends m{constructor(t={}){super(t),this.inputType="number",this.value=this.value??100,this.numberSetting=new w({title:"Height",default:this.value,suffix:"px",minValue:t.minHeight??1,maxValue:t.maxHeight,icon:Z}),this.numberSetting.setOnChange(e=>{var i;isNaN(e)||e<1||(this.value=e,(i=this.onChange)==null||i.call(this,this.value))})}draw(){return this.numberSetting.draw()}}const Z=`<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 m{constructor(t={}){super(t),this.inputType="number",this.value=this.value??100,this.numberSetting=new w({title:"Width",default:this.value,suffix:"px",minValue:t.minWidth??0,maxValue:t.maxWidth,icon:P}),this.numberSetting.setOnChange(e=>{var i;isNaN(e)||e<1||(this.value=e,(i=this.onChange)==null||i.call(this,this.value))})}draw(){return this.numberSetting.draw()}}const P=`<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"/>
|
|
@@ -95,7 +95,7 @@
|
|
|
95
95
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
96
96
|
<path d="M6 2.75H5.85C4.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.35V6.5M6 16.25H5.85C4.58988 16.25 3.95982 16.25 3.47852 16.0048C3.05516 15.789 2.71095 15.4448 2.49524 15.0215C2.25 14.5402 2.25 13.9101 2.25 12.65V12.5M15.75 6.5V6.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.75H12M15.75 12.5V12.65C15.75 13.9101 15.75 14.5402 15.5048 15.0215C15.289 15.4448 14.9448 15.789 14.5215 16.0048C14.0402 16.25 13.4101 16.25 12.15 16.25H12" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
97
97
|
</svg>
|
|
98
|
-
`;class nt extends f{constructor(t){super({title:"Border",collapsed:t==null?void 0:t.collapsed,hideCondition:t==null?void 0:t.hideCondition,settings:{size:new w({title:"Size",icon:st,default:(t==null?void 0:t.size)??0,suffix:"px"}),color:new H({default:(t==null?void 0:t.color)??"0, 0, 30"}),opacity:new
|
|
98
|
+
`;class nt extends f{constructor(t){super({title:"Border",collapsed:t==null?void 0:t.collapsed,hideCondition:t==null?void 0:t.hideCondition,settings:{size:new w({title:"Size",icon:st,default:(t==null?void 0:t.size)??0,suffix:"px"}),color:new H({default:(t==null?void 0:t.color)??"0, 0, 30"}),opacity:new E({default:(t==null?void 0:t.opacity)??100,minValue:0,maxValue:100}),radius:new w({title:"Radius",icon:it,default:(t==null?void 0:t.radius)??12,suffix:"px"})}})}getCssCode(){const t=this.settings.color.value??"#000000",e=this.settings.opacity.value??100,i=this.settings.radius.value??0,s=this.settings.size.value??0;return`
|
|
99
99
|
border-color: ${t};
|
|
100
100
|
border-width: ${s}px;
|
|
101
101
|
border-radius: ${i}px;
|
|
@@ -112,7 +112,7 @@
|
|
|
112
112
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
113
113
|
<path d="M6 5.75H12M9 5.75V13.25M5.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.75H5.85C4.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.35V12.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.25Z" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
114
114
|
</svg>
|
|
115
|
-
`;class ht extends f{constructor(t={}){super({title:t.title||"Typography",collapsed:t.collapsed,hideCondition:t.hideCondition,settings:{color:new H({default:t.colorDefault??"0, 0, 30"}),opacity:new
|
|
115
|
+
`;class ht extends f{constructor(t={}){super({title:t.title||"Typography",collapsed:t.collapsed,hideCondition:t.hideCondition,settings:{color:new H({default:t.colorDefault??"0, 0, 30"}),opacity:new E({default:t.colorOpacityDefault??100}),fontFamily:new O({title:"Font",icon:at,default:t.fontFamilyDefault??"Satoshi",options:t.fontFamilyOptions??[{name:"Satoshi",value:"Satoshi"},{name:"Arial",value:"Arial"},{name:"Roboto",value:"Roboto"}],getOptions:t.fontFamilyGetOptions,getOptionsAsync:t.fontFamilyGetOptionsAsync}),fontWeight:new O({title:"Weight",icon:ot,default:t.fontWeightDefault??"400",options:t.fontWeightOptions??[{name:"Regular",value:"400"},{name:"Medium",value:"500"},{name:"Bold",value:"600"}],getOptions:t.fontWeightGetOptions,getOptionsAsync:t.fontWeightGetOptionsAsync}),fontSize:new w({title:"Size",icon:lt,default:t.fontSizeDefault??12,suffix:"px"}),align:new R({title:"Align",default:t.alignDefault??"center"})}})}getCssCode(){const t=this.settings.color.value??"#000000",e=this.settings.opacity.value??100,i=this.settings.fontFamily.value??"Satoshi",s=this.settings.fontWeight.value??"bold",n=this.settings.fontSize.value??12,a=this.settings.align.value??"left";return`
|
|
116
116
|
color: ${t};
|
|
117
117
|
opacity: ${e/100};
|
|
118
118
|
font-family: ${i};
|
|
@@ -153,7 +153,7 @@
|
|
|
153
153
|
</svg>
|
|
154
154
|
</span>
|
|
155
155
|
<span class="add-label">Add Tab</span>
|
|
156
|
-
`,i.onclick=()=>{this.addTab(),this.rerender()},e.appendChild(i),t.appendChild(e),t}rerender(){if(!this._el)return;const t=this._el.querySelector(".setting-group-content");t&&(t.innerHTML="",Object.keys(this.settings).forEach(e=>{const i=this.settings[e];t.appendChild(i.draw())}))}}class Ct extends f{constructor(t){super({title:"Background Image",collapsed:t==null?void 0:t.collapsed,hideCondition:t==null?void 0:t.hideCondition,settings:{backgroundImage:new W({...t==null?void 0:t.uploadProps,default:(t==null?void 0:t.backgroundImage)??""}),opacity:new
|
|
156
|
+
`,i.onclick=()=>{this.addTab(),this.rerender()},e.appendChild(i),t.appendChild(e),t}rerender(){if(!this._el)return;const t=this._el.querySelector(".setting-group-content");t&&(t.innerHTML="",Object.keys(this.settings).forEach(e=>{const i=this.settings[e];t.appendChild(i.draw())}))}}class Ct extends f{constructor(t){super({title:"Background Image",collapsed:t==null?void 0:t.collapsed,hideCondition:t==null?void 0:t.hideCondition,settings:{backgroundImage:new W({...t==null?void 0:t.uploadProps,default:(t==null?void 0:t.backgroundImage)??""}),opacity:new E({default:(t==null?void 0:t.opacity)??100}),backgroundColor:new H({default:(t==null?void 0:t.backgroundColor)??"0, 0, 30"}),opacityBG:new E({default:(t==null?void 0:t.opacityBG)??100})}})}draw(){const t=super.draw(),e=t.querySelector(".setting-group-content");if(!e)return t;const i=Array.from(e.children),[s,n,a,o]=i;e.innerHTML="",e.appendChild(s),e.appendChild(n);const l=document.createElement("div");return l.className="bgset-or-label",l.textContent="OR",e.appendChild(l),e.appendChild(a),e.appendChild(o),t}getCssCode(){const t=this.settings.backgroundImage.value||"",e=this.settings.opacity.value??100,i=this.settings.backgroundColor.value||"0, 0, 30",s=this.settings.opacityBG.value??100;return t?`
|
|
157
157
|
background-image: url("${t}");
|
|
158
158
|
background-size: cover;
|
|
159
159
|
background-position: center;
|
|
@@ -161,4 +161,4 @@
|
|
|
161
161
|
`:`
|
|
162
162
|
background-color: ${i};
|
|
163
163
|
opacity: ${s/100};
|
|
164
|
-
`}}exports.AlignSetting=R;exports.BackgroundSettingSet=Ct;exports.BorderSettingSet=nt;exports.ButtonSetting=_;exports.ColorSetting=H;exports.DimensionSetting=q;exports.GapSetting=tt;exports.HeaderTypographySettingSet=ht;exports.HeightSetting=z;exports.MarginSettingGroup=rt;exports.NumberSetting=w;exports.OpacitySetting=
|
|
164
|
+
`}}exports.AlignSetting=R;exports.BackgroundSettingSet=Ct;exports.BorderSettingSet=nt;exports.ButtonSetting=_;exports.ColorSetting=H;exports.DimensionSetting=q;exports.GapSetting=tt;exports.HeaderTypographySettingSet=ht;exports.HeightSetting=z;exports.MarginSettingGroup=rt;exports.NumberSetting=w;exports.OpacitySetting=E;exports.SelectApiSettings=Q;exports.SelectSetting=O;exports.Setting=m;exports.SettingGroup=f;exports.StringSetting=y;exports.TabsContainerGroup=mt;exports.TabsSettings=et;exports.Toggle=Y;exports.UploadSetting=W;exports.WidthSetting=J;exports.iterateSettings=T;
|
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
const
|
|
2
|
-
let
|
|
1
|
+
const R = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
|
|
2
|
+
let B = (r = 21) => {
|
|
3
3
|
let t = "", e = crypto.getRandomValues(new Uint8Array(r |= 0));
|
|
4
4
|
for (; r--; )
|
|
5
|
-
t +=
|
|
5
|
+
t += R[e[r] & 63];
|
|
6
6
|
return t;
|
|
7
7
|
};
|
|
8
|
-
function
|
|
8
|
+
function O(r, t) {
|
|
9
9
|
for (const e in r)
|
|
10
10
|
if (r.hasOwnProperty(e)) {
|
|
11
11
|
const i = r[e];
|
|
12
12
|
t(e, i);
|
|
13
13
|
}
|
|
14
14
|
}
|
|
15
|
-
const
|
|
15
|
+
const w = class w {
|
|
16
16
|
constructor(t) {
|
|
17
17
|
this.elementRef = null, this.isHidden = !1, this.custom = !1, this.initialValues = {}, this.changeTimeout = null, this.isHandlingChange = !1, this.changeHandlers = /* @__PURE__ */ new Set(), this.blurTimeout = null, this.lastValues = {}, this.lastChangeTime = 0, this.CHANGE_DEBOUNCE = 100, this.handleBlur = () => {
|
|
18
|
-
}, this.id = t.id ||
|
|
18
|
+
}, this.pendingBlurHandler = null, this.id = t.id || B(), this.title = t.title, this.settings = t.settings, this.description = t.description, this.icon = t.icon, this.isCollapsed = t.collapsed ?? !1, this.isMain = t.main ?? !1, this.custom = t.custom ?? !1, this.hideCondition = t.hideCondition, this.onBlur = t.onBlur, Object.assign(this, t.settings), this.initialValues = this.getValues();
|
|
19
19
|
}
|
|
20
20
|
static hide() {
|
|
21
21
|
this.hiddenElements.forEach((t) => {
|
|
@@ -38,22 +38,35 @@ const b = class b {
|
|
|
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(), O(this.settings, (i, s) => {
|
|
42
42
|
const n = () => {
|
|
43
43
|
this.isHandlingChange || e();
|
|
44
44
|
};
|
|
45
|
-
this.changeHandlers.add(n), s instanceof
|
|
45
|
+
this.changeHandlers.add(n), s instanceof w, s.setOnChange(n);
|
|
46
46
|
}), this;
|
|
47
47
|
}
|
|
48
48
|
setOnBlur(t) {
|
|
49
|
-
return this.onBlur = t, this.
|
|
50
|
-
this.blurTimeout && clearTimeout(this.blurTimeout)
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
49
|
+
return this.onBlur = t, this.pendingBlurHandler = t, this.handleBlur = (e) => {
|
|
50
|
+
(e == null ? void 0 : e.target) instanceof HTMLElement && e.target.closest(".setting-group") !== this.elementRef || (this.blurTimeout && clearTimeout(this.blurTimeout), this.blurTimeout = setTimeout(() => {
|
|
51
|
+
const i = this.getValues(), s = this.calculateChanges(
|
|
52
|
+
this.initialValues,
|
|
53
|
+
i
|
|
54
|
+
);
|
|
55
|
+
Object.keys(s).length > 0 && Date.now() - this.lastChangeTime > this.CHANGE_DEBOUNCE && (t(), this.updateVisibility(), this.initialValues = i);
|
|
56
|
+
}, 50));
|
|
57
|
+
}, this.elementRef && this.setupBlurHandlers(), this;
|
|
58
|
+
}
|
|
59
|
+
setupBlurHandlers() {
|
|
60
|
+
this.elementRef && this.elementRef.removeEventListener("focusout", this.handleBlur), this.elementRef && this.elementRef.addEventListener("focusout", this.handleBlur, !0), O(this.settings, (t, e) => {
|
|
61
|
+
if (e instanceof w)
|
|
62
|
+
e.setOnBlur(this.handleBlur);
|
|
63
|
+
else {
|
|
64
|
+
const i = e.draw();
|
|
65
|
+
i && (i.addEventListener("focusout", this.handleBlur, !0), i.querySelectorAll("input, select, textarea, button, [tabindex]").forEach((n) => {
|
|
66
|
+
n.addEventListener("focusout", this.handleBlur, !0);
|
|
67
|
+
}));
|
|
68
|
+
}
|
|
69
|
+
});
|
|
57
70
|
}
|
|
58
71
|
// Clean up method to be called when the group is destroyed
|
|
59
72
|
cleanup() {
|
|
@@ -87,17 +100,17 @@ const b = class b {
|
|
|
87
100
|
for (const i in this.settings)
|
|
88
101
|
if (this.settings.hasOwnProperty(i)) {
|
|
89
102
|
const s = this.settings[i];
|
|
90
|
-
s instanceof
|
|
103
|
+
s instanceof w ? e[i] = s.getValues() : e[i] = s.value;
|
|
91
104
|
}
|
|
92
105
|
return e;
|
|
93
106
|
} else {
|
|
94
107
|
const e = this.settings[t];
|
|
95
|
-
return e ? e instanceof
|
|
108
|
+
return e ? e instanceof w ? e.getValues() : e.value : void 0;
|
|
96
109
|
}
|
|
97
110
|
}
|
|
98
111
|
draw() {
|
|
99
112
|
const t = document.createElement("div");
|
|
100
|
-
t.className = "setting-group", t.id = `setting-group-${this.id}`,
|
|
113
|
+
t.className = "setting-group", t.id = `setting-group-${this.id}`, w.hiddenElements.add(t), this.hideCondition && this.hideCondition() && (t.style.display = "none"), this.isMain && t.classList.add("main-group");
|
|
101
114
|
const e = document.createElement("div");
|
|
102
115
|
e.className = "setting-group-title", this.isCollapsed && e.classList.add("collapsed-view"), e.setAttribute("role", "button"), e.setAttribute(
|
|
103
116
|
"aria-expanded",
|
|
@@ -174,7 +187,7 @@ const b = class b {
|
|
|
174
187
|
const h = document.createElement("div");
|
|
175
188
|
h.className = "setting-group-empty", h.textContent = "No settings in this group", o.appendChild(h);
|
|
176
189
|
}
|
|
177
|
-
return e.appendChild(i), e.appendChild(n), t.appendChild(e), t.appendChild(o), this.elementRef = t, t;
|
|
190
|
+
return e.appendChild(i), e.appendChild(n), t.appendChild(e), t.appendChild(o), this.elementRef = t, this.pendingBlurHandler && (this.setupBlurHandlers(), this.pendingBlurHandler = null), t;
|
|
178
191
|
}
|
|
179
192
|
collapse() {
|
|
180
193
|
if (!this.elementRef || this.isCollapsed) return;
|
|
@@ -201,8 +214,8 @@ const b = class b {
|
|
|
201
214
|
this.isHidden ? this.show() : this.hide();
|
|
202
215
|
}
|
|
203
216
|
};
|
|
204
|
-
|
|
205
|
-
let f =
|
|
217
|
+
w.hiddenElements = /* @__PURE__ */ new Set();
|
|
218
|
+
let f = w;
|
|
206
219
|
function W(r) {
|
|
207
220
|
switch (r) {
|
|
208
221
|
case "number":
|
|
@@ -223,7 +236,7 @@ function W(r) {
|
|
|
223
236
|
}
|
|
224
237
|
class m {
|
|
225
238
|
constructor(t = {}) {
|
|
226
|
-
this.props = t, this.id = t.id ||
|
|
239
|
+
this.props = t, this.id = t.id || B(), this.value = this.props.default, this.title = t.title || "";
|
|
227
240
|
}
|
|
228
241
|
destroy() {
|
|
229
242
|
throw new Error("Method not implemented.");
|
|
@@ -311,12 +324,12 @@ class H extends m {
|
|
|
311
324
|
});
|
|
312
325
|
}
|
|
313
326
|
}
|
|
314
|
-
const
|
|
327
|
+
const N = "<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>";
|
|
315
328
|
class S extends H {
|
|
316
329
|
constructor(t) {
|
|
317
330
|
super({
|
|
318
331
|
...t,
|
|
319
|
-
icon: t.icon ||
|
|
332
|
+
icon: t.icon || N,
|
|
320
333
|
title: t.title || "Color"
|
|
321
334
|
}), this.inputType = "color", this.detectChange = t.detectChange;
|
|
322
335
|
}
|
|
@@ -339,7 +352,7 @@ class S extends H {
|
|
|
339
352
|
t.className = "color-setting-wrapper";
|
|
340
353
|
const e = document.createElement("div");
|
|
341
354
|
e.className = "icon-container";
|
|
342
|
-
const i = this.createIcon(this.props.icon ||
|
|
355
|
+
const i = this.createIcon(this.props.icon || N), s = this.createLabel(this.title || "Color");
|
|
343
356
|
e.appendChild(i), e.appendChild(s);
|
|
344
357
|
const n = document.createElement("div");
|
|
345
358
|
n.className = "color-input-wrapper";
|
|
@@ -347,8 +360,8 @@ class S extends H {
|
|
|
347
360
|
const g = p.value.split(",").map((T) => parseInt(T.trim()));
|
|
348
361
|
if (g.length !== 3 || g.some(isNaN))
|
|
349
362
|
return p.style.border = "1px solid red", !1;
|
|
350
|
-
const [d, C, v] = g,
|
|
351
|
-
return p.style.border =
|
|
363
|
+
const [d, C, v] = g, E = d >= 0 && d <= 255 && C >= 0 && C <= 255 && v >= 0 && v <= 255;
|
|
364
|
+
return p.style.border = E ? "" : "1px solid red", E;
|
|
352
365
|
}, o = document.createElement("div");
|
|
353
366
|
o.className = "color-preview", o.style.backgroundColor = this.value ? `rgb(${this.value})` : "";
|
|
354
367
|
const l = this.createInput({
|
|
@@ -375,7 +388,7 @@ class S extends H {
|
|
|
375
388
|
}, n.appendChild(o), n.appendChild(h), 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;
|
|
376
389
|
}
|
|
377
390
|
}
|
|
378
|
-
class
|
|
391
|
+
class b extends m {
|
|
379
392
|
constructor(t = {}) {
|
|
380
393
|
super(t), this.inputType = "number";
|
|
381
394
|
}
|
|
@@ -406,7 +419,7 @@ class w extends m {
|
|
|
406
419
|
return s.className = "suffix-label", s.textContent = this.props.suffix, e.appendChild(s), e;
|
|
407
420
|
}
|
|
408
421
|
}
|
|
409
|
-
class M extends
|
|
422
|
+
class M extends b {
|
|
410
423
|
constructor(t) {
|
|
411
424
|
super({
|
|
412
425
|
...t,
|
|
@@ -430,7 +443,7 @@ const A = `
|
|
|
430
443
|
<polyline points="6 9 12 15 18 9"></polyline>
|
|
431
444
|
</svg>
|
|
432
445
|
`;
|
|
433
|
-
class
|
|
446
|
+
class V extends m {
|
|
434
447
|
constructor(t = {}) {
|
|
435
448
|
if (super(t), this.inputType = "select", this._options = [], this.isOpen = !1, this.selectedOptionIndex = null, this.optionsListEl = null, this.svgContainer = null, this.buttonEl = null, this.isLoading = !1, this.container = null, this.clickOutsideListener = null, t.options && (this._options = [...t.options]), t.getOptions && this._options.push(...t.getOptions()), t.getOptionsAsync && (this.isLoading = !0), this.value !== void 0) {
|
|
436
449
|
const e = this._options.findIndex((i) => i.value === this.value);
|
|
@@ -587,20 +600,20 @@ class at extends m {
|
|
|
587
600
|
this.value || (this.value = {
|
|
588
601
|
width: e,
|
|
589
602
|
height: i
|
|
590
|
-
}), this.minWidth = Math.max(1, t.minWidth || 1), this.maxWidth = t.maxWidth, this.minHeight = Math.max(1, t.minHeight || 1), this.maxHeight = t.maxHeight, this.locked = t.locked ?? !1, (!this.value.width || this.value.width < 1) && (this.value.width = 1), (!this.value.height || this.value.height < 1) && (this.value.height = 1), this.value.height > 0 && (this.aspectRatio = this.value.width / this.value.height), this.widthSetting = new
|
|
603
|
+
}), this.minWidth = Math.max(1, t.minWidth || 1), this.maxWidth = t.maxWidth, this.minHeight = Math.max(1, t.minHeight || 1), this.maxHeight = t.maxHeight, this.locked = t.locked ?? !1, (!this.value.width || this.value.width < 1) && (this.value.width = 1), (!this.value.height || this.value.height < 1) && (this.value.height = 1), this.value.height > 0 && (this.aspectRatio = this.value.width / this.value.height), this.widthSetting = new b({
|
|
591
604
|
title: "Width",
|
|
592
605
|
default: this.value.width,
|
|
593
606
|
suffix: "px",
|
|
594
607
|
minValue: this.minWidth,
|
|
595
608
|
maxValue: this.maxWidth,
|
|
596
|
-
icon:
|
|
597
|
-
}), this.heightSetting = new
|
|
609
|
+
icon: j
|
|
610
|
+
}), this.heightSetting = new b({
|
|
598
611
|
title: "Height",
|
|
599
612
|
default: this.value.height,
|
|
600
613
|
suffix: "px",
|
|
601
614
|
minValue: this.minHeight,
|
|
602
615
|
maxValue: this.maxHeight,
|
|
603
|
-
icon:
|
|
616
|
+
icon: _
|
|
604
617
|
}), this.widthSetting.setOnChange(this.handleWidthChange.bind(this)), this.heightSetting.setOnChange(this.handleHeightChange.bind(this));
|
|
605
618
|
}
|
|
606
619
|
handleWidthChange(t) {
|
|
@@ -692,15 +705,15 @@ class at extends m {
|
|
|
692
705
|
}
|
|
693
706
|
}
|
|
694
707
|
}
|
|
695
|
-
const
|
|
708
|
+
const j = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
696
709
|
<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"/>
|
|
697
|
-
</svg>`,
|
|
710
|
+
</svg>`, _ = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
698
711
|
<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"/>
|
|
699
712
|
</svg>`, y = `
|
|
700
713
|
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" viewBox="0 0 15 16" fill="none">
|
|
701
714
|
<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"/>
|
|
702
715
|
</svg>
|
|
703
|
-
`,
|
|
716
|
+
`, I = `
|
|
704
717
|
<svg width="91" height="71" viewBox="0 0 91 71" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
705
718
|
<rect width="91" height="71" rx="4" fill="#F2F4F7"/>
|
|
706
719
|
<path d="M37 31.5L39.5 29M39.5 29L42 31.5M39.5 29V34.625M44.5 31.9643C45.2634 31.3338 45.75 30.38 45.75 29.3125C45.75 27.414 44.211 25.875 42.3125 25.875C42.1759 25.875 42.0482 25.8037 41.9788 25.6861C41.1638 24.303 39.659 23.375 37.9375 23.375C35.3487 23.375 33.25 25.4737 33.25 28.0625C33.25 29.3538 33.7721 30.5232 34.6168 31.371" stroke="#475467" stroke-linecap="round" stroke-linejoin="round"/>
|
|
@@ -748,7 +761,7 @@ class U extends m {
|
|
|
748
761
|
const s = this.value && this.value !== "";
|
|
749
762
|
s || i.classList.add("no-image");
|
|
750
763
|
const n = document.createElement("div");
|
|
751
|
-
n.className = "preview-placeholder", n.innerHTML =
|
|
764
|
+
n.className = "preview-placeholder", n.innerHTML = I, this.previewWrapper = document.createElement("div"), this.previewWrapper.className = "preview-wrapper", this.emptyStateEl = document.createElement("div"), this.emptyStateEl.className = "empty-state", this.emptyStateEl.innerHTML = I, this.previewEl = document.createElement("img"), this.previewEl.className = "upload-preview";
|
|
752
765
|
const a = document.createElement("button");
|
|
753
766
|
a.className = "delete-button", a.type = "button", a.title = "Delete image", a.innerHTML = q, this.previewWrapper.appendChild(this.emptyStateEl), this.previewWrapper.appendChild(this.previewEl), this.previewWrapper.appendChild(a);
|
|
754
767
|
const o = document.createElement("button");
|
|
@@ -773,15 +786,15 @@ class U extends m {
|
|
|
773
786
|
const C = this.props.uploadUrl;
|
|
774
787
|
if (!C)
|
|
775
788
|
throw new Error("No uploadUrl provided to UploadSetting.");
|
|
776
|
-
const v = this.props.requestMethod || "POST",
|
|
789
|
+
const v = this.props.requestMethod || "POST", E = { ...this.props.requestHeaders || {} }, L = await (await fetch(C, {
|
|
777
790
|
method: v,
|
|
778
791
|
body: g,
|
|
779
|
-
headers:
|
|
792
|
+
headers: E
|
|
780
793
|
})).json();
|
|
781
794
|
let x;
|
|
782
795
|
if (this.props.parseResponse)
|
|
783
|
-
x = this.props.parseResponse(
|
|
784
|
-
else if (x = (u =
|
|
796
|
+
x = this.props.parseResponse(L);
|
|
797
|
+
else if (x = (u = L == null ? void 0 : L.data) == null ? void 0 : u.url, !x)
|
|
785
798
|
throw new Error(
|
|
786
799
|
"No URL found in response. Provide a parseResponse if needed."
|
|
787
800
|
);
|
|
@@ -796,7 +809,7 @@ class U extends m {
|
|
|
796
809
|
}
|
|
797
810
|
class ot extends m {
|
|
798
811
|
constructor(t = {}) {
|
|
799
|
-
super(t), this.inputType = "number", this.value = this.value ?? 100, this.numberSetting = new
|
|
812
|
+
super(t), this.inputType = "number", this.value = this.value ?? 100, this.numberSetting = new b({
|
|
800
813
|
title: "Height",
|
|
801
814
|
default: this.value,
|
|
802
815
|
suffix: "px",
|
|
@@ -817,7 +830,7 @@ const F = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBo
|
|
|
817
830
|
</svg>`;
|
|
818
831
|
class lt extends m {
|
|
819
832
|
constructor(t = {}) {
|
|
820
|
-
super(t), this.inputType = "number", this.value = this.value ?? 100, this.numberSetting = new
|
|
833
|
+
super(t), this.inputType = "number", this.value = this.value ?? 100, this.numberSetting = new b({
|
|
821
834
|
title: "Width",
|
|
822
835
|
default: this.value,
|
|
823
836
|
suffix: "px",
|
|
@@ -1202,7 +1215,7 @@ class pt extends f {
|
|
|
1202
1215
|
collapsed: t == null ? void 0 : t.collapsed,
|
|
1203
1216
|
hideCondition: t == null ? void 0 : t.hideCondition,
|
|
1204
1217
|
settings: {
|
|
1205
|
-
size: new
|
|
1218
|
+
size: new b({
|
|
1206
1219
|
title: "Size",
|
|
1207
1220
|
icon: P,
|
|
1208
1221
|
default: (t == null ? void 0 : t.size) ?? 0,
|
|
@@ -1216,7 +1229,7 @@ class pt extends f {
|
|
|
1216
1229
|
minValue: 0,
|
|
1217
1230
|
maxValue: 100
|
|
1218
1231
|
}),
|
|
1219
|
-
radius: new
|
|
1232
|
+
radius: new b({
|
|
1220
1233
|
title: "Radius",
|
|
1221
1234
|
icon: J,
|
|
1222
1235
|
default: (t == null ? void 0 : t.radius) ?? 12,
|
|
@@ -1264,7 +1277,7 @@ class ut extends f {
|
|
|
1264
1277
|
opacity: new M({
|
|
1265
1278
|
default: t.colorOpacityDefault ?? 100
|
|
1266
1279
|
}),
|
|
1267
|
-
fontFamily: new
|
|
1280
|
+
fontFamily: new V({
|
|
1268
1281
|
title: "Font",
|
|
1269
1282
|
icon: X,
|
|
1270
1283
|
default: t.fontFamilyDefault ?? "Satoshi",
|
|
@@ -1276,7 +1289,7 @@ class ut extends f {
|
|
|
1276
1289
|
getOptions: t.fontFamilyGetOptions,
|
|
1277
1290
|
getOptionsAsync: t.fontFamilyGetOptionsAsync
|
|
1278
1291
|
}),
|
|
1279
|
-
fontWeight: new
|
|
1292
|
+
fontWeight: new V({
|
|
1280
1293
|
title: "Weight",
|
|
1281
1294
|
icon: Q,
|
|
1282
1295
|
default: t.fontWeightDefault ?? "400",
|
|
@@ -1288,7 +1301,7 @@ class ut extends f {
|
|
|
1288
1301
|
getOptions: t.fontWeightGetOptions,
|
|
1289
1302
|
getOptionsAsync: t.fontWeightGetOptionsAsync
|
|
1290
1303
|
}),
|
|
1291
|
-
fontSize: new
|
|
1304
|
+
fontSize: new b({
|
|
1292
1305
|
title: "Size",
|
|
1293
1306
|
icon: Y,
|
|
1294
1307
|
default: t.fontSizeDefault ?? 12,
|
|
@@ -1610,10 +1623,10 @@ export {
|
|
|
1610
1623
|
ut as HeaderTypographySettingSet,
|
|
1611
1624
|
ot as HeightSetting,
|
|
1612
1625
|
gt as MarginSettingGroup,
|
|
1613
|
-
|
|
1626
|
+
b as NumberSetting,
|
|
1614
1627
|
M as OpacitySetting,
|
|
1615
1628
|
ht as SelectApiSettings,
|
|
1616
|
-
|
|
1629
|
+
V as SelectSetting,
|
|
1617
1630
|
m as Setting,
|
|
1618
1631
|
f as SettingGroup,
|
|
1619
1632
|
H as StringSetting,
|
|
@@ -1622,5 +1635,5 @@ export {
|
|
|
1622
1635
|
rt as Toggle,
|
|
1623
1636
|
U as UploadSetting,
|
|
1624
1637
|
lt as WidthSetting,
|
|
1625
|
-
|
|
1638
|
+
O as iterateSettings
|
|
1626
1639
|
};
|
package/dist/index.d.ts
CHANGED
|
@@ -411,12 +411,14 @@ export declare class SettingGroup<T extends Record<string, Setting<any, any> | S
|
|
|
411
411
|
private lastValues;
|
|
412
412
|
private lastChangeTime;
|
|
413
413
|
private readonly CHANGE_DEBOUNCE;
|
|
414
|
+
private handleBlur;
|
|
415
|
+
private pendingBlurHandler;
|
|
414
416
|
constructor(groupProps: SettingGroupProps<T>);
|
|
415
417
|
static hide(): void;
|
|
416
418
|
static show(): void;
|
|
417
419
|
setOnChange(onChange: (value: T) => void): SettingGroup<T>;
|
|
418
420
|
setOnBlur(onBlur: () => void): SettingGroup<T>;
|
|
419
|
-
private
|
|
421
|
+
private setupBlurHandlers;
|
|
420
422
|
cleanup(): void;
|
|
421
423
|
calculateChanges(oldValues: Record<string, any>, newValues: Record<string, any>): Record<string, any>;
|
|
422
424
|
hide(): void;
|
package/package.json
CHANGED