builder-settings-types 0.0.51 → 0.0.53

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.
Files changed (5) hide show
  1. package/dist/builder-settings-types.cjs.js +37 -15
  2. package/dist/builder-settings-types.es.js +306 -168
  3. package/dist/index.css +1 -1
  4. package/dist/index.d.ts +43 -7
  5. package/package.json +1 -1
package/dist/builder-settings-types.cjs.js CHANGED
@@ -1,18 +1,29 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const L="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";let f=(o=21)=>{let t="",e=crypto.getRandomValues(new Uint8Array(o|=0));for(;o--;)t+=L[e[o]&63];return t};function x(o,t){for(const e in o)if(o.hasOwnProperty(e)){const n=o[e];t(e,n)}}class k{setOnChange(t){this.onChange=t,x(this.settings,(e,n)=>{n.setOnChange(t)})}constructor(t){this.id=t.id||f(),this.title=t.title,this.settings=t.settings,Object.assign(this,t.settings)}draw(){const t=document.createElement("div");t.className="setting-group";const e=document.createElement("div");e.className="setting-group-title";const n=document.createElement("h3");n.textContent=this.title;const s=document.createElement("span");s.className="setting-group-arrow",s.innerHTML=`
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const N="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";let x=(r=21)=>{let t="",e=crypto.getRandomValues(new Uint8Array(r|=0));for(;r--;)t+=N[e[r]&63];return t};function H(r,t){for(const e in r)if(r.hasOwnProperty(e)){const i=r[e];t(e,i)}}class m{constructor(t){this.id=t.id||x(),this.title=t.title,this.settings=t.settings,Object.assign(this,t.settings)}setOnChange(t){return this.onChange=t,H(this.settings,(e,i)=>{i.setOnChange(t)}),this}getValues(t){if(t===void 0){const e={};for(const i in this.settings)if(this.settings.hasOwnProperty(i)){const n=this.settings[i];n instanceof m?e[i]=n.getValues():e[i]=n.value}return e}else{const e=this.settings[t];return e?e instanceof m?e.getValues():e.value:void 0}}draw(){const t=document.createElement("div");t.className="setting-group";const e=document.createElement("div");e.className="setting-group-title";const i=document.createElement("h3");i.textContent=this.title;const n=document.createElement("span");n.className="setting-group-arrow",n.innerHTML=`
2
2
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
3
3
  <path d="M5 7.5L10 12.5L15 7.5" stroke="#344054" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
4
4
  </svg>
5
- `;const i=document.createElement("div");i.className="setting-group-content";for(const a in this.settings){const r=this.settings[a].draw();i.appendChild(r)}return e.onclick=()=>{i.classList.toggle("collapsed"),s.classList.toggle("rotated")},e.appendChild(n),e.appendChild(s),t.appendChild(e),t.appendChild(i),t}}function b(o){switch(o){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 g{constructor(t={}){this.props=t,this.id=t.id||f(),this.value=this.props.default,this.title=t.title||""}setOnChange(t){this.onChange=t}setValue(t){this.value=t,this.inputEl&&(this.inputEl.value=String(t)),this.onChange&&this.onChange(t)}createInput(t){t={...this.props.inputProps,...t};const e=document.createElement("div");if(e.className=t.wrapperClassName||"",t.title||t.icon){const i=document.createElement("div");if(i.className="icon-container",t.icon){const a=this.createIcon(t.icon,t.iconClassName);i.appendChild(a)}if(t.title){const a=this.createLabel(t.title,t.labelClassName);i.appendChild(a)}e.appendChild(i)}const n=document.createElement("div");n.className=t.wrapperClassName||"";const s=document.createElement("input");return this.inputEl=s,s.value=String(t.value||b(t.inputType)),s.type=t.inputType,s.placeholder=t.placeholder||"",s.className=t.inputClassName||"",s.oninput=i=>{const a=i.target;let c=a.value;t.inputType==="number"?c=Number(a.value):(t.inputType==="color"||t.inputType==="date")&&(c=a.value),this.value=c,this.onChange&&this.onChange(this.value)},t.inputCustomizer&&t.inputCustomizer(s),n.appendChild(s),e.appendChild(n),e}createLabel(t,e){const n=document.createElement("span");return n.textContent=t,n.className="input-label "+(e||""),n}createIcon(t,e){const n=document.createElement("span");return n.className="input-icon "+(e||""),n.innerHTML=t,n}}class u extends g{constructor(t={}){super(t),this.inputType="number"}draw(){const t=i=>{this.props.minValue!==void 0&&(i.min=String(this.props.minValue)),this.props.maxValue!==void 0&&(i.max=String(this.props.maxValue)),this.props.className&&i.classList.add(this.props.className),i.addEventListener("input",()=>{const a=this.props.minValue??Number.MIN_SAFE_INTEGER,c=this.props.maxValue??Number.MAX_SAFE_INTEGER;let r=Number(i.value);r<a&&(r=a),r>c&&(r=c),i.value=String(r)})},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 n=e.querySelector("input.number-setting-input");n&&(n.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 k{constructor(){super({title:"Margin",settings:{margin:new u({title:"Margin All"}),marginTop:new u({title:"Margin Top"}),marginRight:new u({title:"Margin Right"}),marginBottom:new u({title:"Margin Bottom"}),marginLeft:new u({title:"Margin Left"})}})}getCssCode(){return`
6
- margin-botton: ${this.settings.marginBottom.value}px;
7
- margin-top: ${this.settings.marginTop.value}px;
8
- margin-right: ${this.settings.marginRight.value}px;
9
- margin-left: ${this.settings.marginLeft.value}px;
10
- `}}class N extends g{constructor(t={}){super(t),this.inputType="text"}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 w="<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 S extends N{constructor(t){super({...t,icon:t.icon||w,title:t.title||"Color"}),this.inputType="color"}draw(){const t=document.createElement("div");t.className="color-setting-wrapper";const e=document.createElement("div");e.className="icon-container";const n=this.createIcon(this.props.icon||w),s=this.createLabel(this.title||"Color");console.log("label:",s),e.appendChild(n),e.appendChild(s);const i=document.createElement("div");i.className="color-input-wrapper";const a=/^([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/,c=p=>{const l=p.value.startsWith("#")?p.value.slice(1):p.value;return a.test(l)?(p.style.border="",!0):(p.style.border="1px solid red",!1)},r=document.createElement("div");r.className="color-preview",r.style.backgroundColor=this.value||"";const d=this.createInput({value:this.value,inputType:"text",inputClassName:"color-text-input"}),h=d.querySelector("input"),v=this.createInput({value:this.value,inputType:this.inputType,inputClassName:"color-picker"}),m=v.querySelector("input");return h.oninput=p=>{var C;let l=p.target.value.trim();l.charAt(0)!=="#"&&(l="#"+l,h.value=l),c(h)&&(this.value=l,(C=this.onChange)==null||C.call(this,l),m.value=l,r.style.backgroundColor=l)},m.oninput=p=>{var C;let l=p.target.value;l.charAt(0)!=="#"&&(l="#"+l,m.value=l),this.value=l,(C=this.onChange)==null||C.call(this,l),h.value=l,r.style.backgroundColor=l,c(h)},i.appendChild(r),i.appendChild(v),i.appendChild(d),t.appendChild(e),t.appendChild(i),t}}class M extends u{constructor(t){super({...t,minValue:0,maxValue:100,icon:t.icon||y,title:t.title||"Opacity"}),this.inputType="number"}}const y=`
5
+ `,e.onclick=()=>{const a=t.querySelector(".setting-group-content");a&&(a.classList.toggle("collapsed"),n.classList.toggle("rotated"))},e.appendChild(i),e.appendChild(n);const s=document.createElement("div");s.className="setting-group-content";for(const a in this.settings)if(this.settings.hasOwnProperty(a)){const o=this.settings[a];s.appendChild(o.draw())}return t.appendChild(e),t.appendChild(s),t}}function b(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 d{constructor(t={}){this.props=t,this.id=t.id||x(),this.value=this.props.default,this.title=t.title||""}setOnChange(t){return this.onChange=t,this}setValue(t){this.value=t,this.inputEl&&(this.inputEl.value=String(t)),this.onChange&&this.onChange(t)}createInput(t){t={...this.props.inputProps,...t};const e=document.createElement("div");if(e.className=t.wrapperClassName||"",t.title||t.icon){const s=document.createElement("div");if(s.className="icon-container",t.icon){const a=this.createIcon(t.icon,t.iconClassName);s.appendChild(a)}if(t.title){const a=this.createLabel(t.title,t.labelClassName);s.appendChild(a)}e.appendChild(s)}const i=document.createElement("div");i.className=t.wrapperClassName||"";const n=document.createElement("input");return this.inputEl=n,n.value=String(t.value||b(t.inputType)),n.type=t.inputType,n.placeholder=t.placeholder||"",n.className=t.inputClassName||"",n.oninput=s=>{const a=s.target;let o=a.value;t.inputType==="number"?o=Number(a.value):(t.inputType==="color"||t.inputType==="date")&&(o=a.value),this.value=o,this.onChange&&this.onChange(this.value)},t.inputCustomizer&&t.inputCustomizer(n),i.appendChild(n),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 v extends d{constructor(t){super({...t,default:t.default!==void 0?t.default:"auto"}),this.inputType="number",this.value=t.default!==void 0?t.default:"auto"}draw(){const t=this.value==="auto"?"text":"number",e=o=>{this.value!=="auto"&&(this.props.minValue!==void 0&&(o.min=String(this.props.minValue)),this.props.maxValue!==void 0&&(o.max=String(this.props.maxValue)),this.props.className&&o.classList.add(this.props.className),o.addEventListener("input",()=>{const l=this.props.minValue??Number.MIN_SAFE_INTEGER,h=this.props.maxValue??Number.MAX_SAFE_INTEGER;let c=Number(o.value);c<l&&(c=l),c>h&&(c=h),o.value=String(c)}))},i=this.createInput({value:this.value,inputType:t,title:this.props.title,icon:this.props.icon,inputClassName:"number-setting-input "+(this.props.inputClassName||""),wrapperClassName:"number-setting-wrapper "+(this.props.wrapperClassName||""),inputCustomizer:e,placeholder:this.value==="auto"?"auto":""});if(!this.props.suffix||this.props.suffix==="none")return i;i.classList.add("suffix-wrapper");const n=i.querySelector("input.number-setting-input");n&&(n.style.paddingRight="35px");const s=document.createElement("span");s.className="suffix-label",s.textContent=this.props.suffix,i.appendChild(s);const a=i.querySelector("input");return a&&(a.oninput=o=>{const l=o.target.value.trim();if(l.toLowerCase()==="auto")this.value="auto";else{const h=Number(l);isNaN(h)||(this.value=h)}this.onChange&&this.onChange(this.value)}),i}}class L extends m{constructor(){super({title:"Margins",settings:{marginTop:new v({title:"Top",icon:E,suffix:"px",default:"auto"}),marginRight:new v({title:"Right",icon:S,suffix:"px",default:0}),marginBottom:new v({title:"Bottom",icon:y,suffix:"px",default:0}),marginLeft:new v({title:"Left",icon:V,suffix:"px",default:0})}})}getCssCode(){const t=typeof this.settings.marginTop.value=="number"?`${this.settings.marginTop.value}px`:this.settings.marginTop.value,e=typeof this.settings.marginRight.value=="number"?`${this.settings.marginRight.value}px`:this.settings.marginRight.value,i=typeof this.settings.marginBottom.value=="number"?`${this.settings.marginBottom.value}px`:this.settings.marginBottom.value,n=typeof this.settings.marginLeft.value=="number"?`${this.settings.marginLeft.value}px`:this.settings.marginLeft.value;return`
6
+ margin-top: ${t};
7
+ margin-right: ${e};
8
+ margin-bottom: ${i};
9
+ margin-left: ${n};
10
+ `}}const E=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
11
+ <path d="M2.25 16.25H2.2575M2.25 9.5H2.2575M2.25 12.875H2.2575M2.25 6.125H2.2575M5.625 16.25H5.6325M5.625 9.5H5.6325M12.375 16.25H12.3825M12.375 9.5H12.3825M9 16.25H9.0075M9 9.5H9.0075M9 12.875H9.0075M9 6.125H9.0075M15.75 16.25H15.7575M15.75 9.5H15.7575M15.75 12.875H15.7575M15.75 6.125H15.7575M15.75 2.75H2.25" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
12
+ </svg>`,S=`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 16 15" fill="none">
13
+ <path d="M4.625 0.75H4.6325M4.625 7.5H4.6325M4.625 14.25H4.6325M11.375 0.75H11.3825M11.375 7.5H11.3825M11.375 14.25H11.3825M8 0.75H8.0075M8 7.5H8.0075M8 14.25H8.0075M8 10.875H8.0075M8 4.125H8.0075M1.25 0.75H1.2575M1.25 7.5H1.2575M1.25 14.25H1.2575M1.25 10.875H1.2575M1.25 4.125H1.2575M14.75 14.25V0.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
14
+ </svg>`,y=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
15
+ <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"/>
16
+ </svg>`,V=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
17
+ <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"/>
18
+ </svg>`;class k extends d{constructor(t={}){super(t),this.inputType="text"}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 M="<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 k{constructor(t){super({...t,icon:t.icon||M,title:t.title||"Color"}),this.inputType="color"}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||M),n=this.createLabel(this.title||"Color");e.appendChild(i),e.appendChild(n);const s=document.createElement("div");s.className="color-input-wrapper";const a=/^([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/,o=p=>{const u=p.value.startsWith("#")?p.value.slice(1):p.value;return a.test(u)?(p.style.border="",!0):(p.style.border="1px solid red",!1)},l=document.createElement("div");l.className="color-preview",l.style.backgroundColor=this.value||"";const h=this.createInput({value:this.value,inputType:"text",inputClassName:"color-text-input"}),c=h.querySelector("input"),g=this.createInput({value:this.value,inputType:this.inputType,inputClassName:"color-picker"}),w=g.querySelector("input");return c.oninput=p=>{var C;let u=p.target.value.trim();u.charAt(0)!=="#"&&(u="#"+u,c.value=u),o(c)&&(this.value=u,(C=this.onChange)==null||C.call(this,u),w.value=u,l.style.backgroundColor=u)},w.oninput=p=>{var C;let u=p.target.value;u.charAt(0)!=="#"&&(u="#"+u,w.value=u),this.value=u,(C=this.onChange)==null||C.call(this,u),c.value=u,l.style.backgroundColor=u,o(c)},s.appendChild(l),s.appendChild(g),s.appendChild(h),t.appendChild(e),t.appendChild(s),t}}class f extends d{constructor(t={}){super(t),this.inputType="number"}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",()=>{const a=this.props.minValue??Number.MIN_SAFE_INTEGER,o=this.props.maxValue??Number.MAX_SAFE_INTEGER;let l=Number(s.value);l<a&&(l=a),l>o&&(l=o),s.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 n=document.createElement("span");return n.className="suffix-label",n.textContent=this.props.suffix,e.appendChild(n),e}}class I extends f{constructor(t){super({...t,minValue:0,maxValue:100,icon:t.icon||R,title:t.title||"Opacity"}),this.inputType="number"}}const R=`
11
19
  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
12
- <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"/>
13
- <path d="M9.00026 17.5623C6.84776 17.5623 4.82278 16.7223 3.30028 15.1998C3.19528 15.0948 3.13525 14.9523 3.13525 14.8023C3.13525 14.6523 3.19528 14.5098 3.30028 14.4048L13.9052 3.79984C14.1227 3.58234 14.4827 3.58234 14.7002 3.79984C16.2227 5.32234 17.0628 7.34734 17.0628 9.49984C17.0628 13.9473 13.4478 17.5623 9.00026 17.5623ZM4.50777 14.7873C5.76027 15.8523 7.33526 16.4373 9.00026 16.4373C12.8253 16.4373 15.9378 13.3248 15.9378 9.49984C15.9378 7.83484 15.3527 6.25984 14.2878 5.00734L4.50777 14.7873Z" fill="#667085"/>
14
- </svg>
15
- `;class T extends g{constructor(t={}){super(t),this.inputType="select",this.props.options||(this.props.options=[]),this.props.getOptionsAsync&&this.props.getOptionsAsync().then(e=>{this.props.options=[...this.props.options,...e],e.forEach(n=>{var s;(s=this.selectNode)==null||s.appendChild(this.createOption(n))})}).catch(e=>{console.error("Failed to fetch async options:",e)})}createOption(t){const e=document.createElement("option");return e.value=t.value,e.textContent=t.name,e}draw(){var c,r;const t=document.createElement("div");t.classList.add("select-container");const e=document.createElement("div");e.className="icon-container";const n=this.createIcon(this.props.icon||""),s=this.createLabel(this.props.title||""),i=document.createElement("select");return this.selectNode=i,i.classList.add("select"),i.onchange=d=>{var h;this.value=d.target.value,(h=this.onChange)==null||h.call(this,d.target.value)},[...this.props.options||[],...((r=(c=this.props).getOptions)==null?void 0:r.call(c))||[]].forEach(d=>{const h=this.createOption(d);i.appendChild(h)}),this.value&&(i.value=this.value),e.appendChild(n),e.appendChild(s),t.appendChild(e),t.appendChild(i),t}}class V extends g{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 n=document.createElement("div");return n.className="align-options-container",[{name:"left",icon:`
20
+ <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"/>
21
+ <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"/>
22
+ <path d="M10.0575 17.4873C9.91496 17.4873 9.77248 17.4348 9.65998 17.3223L5.41496 13.0773C5.19746 12.8598 5.19746 12.4998 5.41496 12.2823C5.63246 12.0648 5.9925 12.0648 6.21 12.2823L10.455 16.5273C10.6725 16.7448 10.6725 17.1048 10.455 17.3223C10.35 17.4348 10.2075 17.4873 10.0575 17.4873Z" fill="#667085"/>
23
+ <path d="M13.4025 15.5225C13.26 15.5225 13.1175 15.47 13.005 15.3575L8.06999 10.4225C7.85249 10.205 7.85249 9.84498 8.06999 9.62748C8.28749 9.40998 8.64748 9.40998 8.86498 9.62748L13.8 14.5625C14.0175 14.78 14.0175 15.14 13.8 15.3575C13.6875 15.47 13.545 15.5225 13.4025 15.5225Z" fill="#667085"/>
24
+ <path d="M15.84 12.6648C15.6975 12.6648 15.555 12.6123 15.4425 12.4998L10.725 7.78234C10.5075 7.56484 10.5075 7.20484 10.725 6.98734C10.9425 6.76984 11.3025 6.76984 11.52 6.98734L16.2375 11.7048C16.455 11.9223 16.455 12.2823 16.2375 12.4998C16.1325 12.6048 15.99 12.6648 15.84 12.6648Z" fill="#667085"/>
25
+ </svg>
26
+ `;class B extends d{constructor(t={}){super(t),this.inputType="select",this.props.options||(this.props.options=[]),this.props.getOptionsAsync&&this.props.getOptionsAsync().then(e=>{this.props.options=[...this.props.options,...e],e.forEach(i=>{var n;(n=this.selectNode)==null||n.appendChild(this.createOption(i))})}).catch(e=>{console.error("Failed to fetch async options:",e)})}createOption(t){const e=document.createElement("option");return e.value=t.value,e.textContent=t.name,e}draw(){var o,l;const t=document.createElement("div");t.classList.add("select-container");const e=document.createElement("div");e.className="icon-container";const i=this.createIcon(this.props.icon||""),n=this.createLabel(this.props.title||""),s=document.createElement("select");return this.selectNode=s,s.classList.add("select"),s.onchange=h=>{var c;this.value=h.target.value,(c=this.onChange)==null||c.call(this,h.target.value)},[...this.props.options||[],...((l=(o=this.props).getOptions)==null?void 0:l.call(o))||[]].forEach(h=>{const c=this.createOption(h);s.appendChild(c)}),this.value&&(s.value=this.value),e.appendChild(i),e.appendChild(n),t.appendChild(e),t.appendChild(s),t}}class O extends d{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:`
16
27
  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
17
28
  <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"
18
29
  stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
@@ -33,12 +44,23 @@
33
44
  <path d="M13.5 15C14.1989 15 14.5484 15 14.824 14.8858C15.1916 14.7336 15.4836 14.4416 15.6358 14.074C15.75 13.7984 15.75 13.4489 15.75 12.75C15.75 12.0511 15.75 11.7016 15.6358 11.426C15.4836 11.0584 15.1916 10.7664 14.824 10.6142C14.5484 10.5 14.1989 10.5 13.5 10.5H4.5C3.80109 10.5 3.45163 10.5 3.17598 10.6142C2.80843 10.7664 2.51642 11.0584 2.36418 11.426C2.25 11.7016 2.25 12.0511 2.25 12.75C2.25 13.4489 2.25 13.7984 2.36418 14.074C2.51642 14.4416 2.80843 14.7336 3.17597 14.8858C3.45163 15 3.80109 15 4.5 15L13.5 15Z"
34
45
  stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
35
46
  </svg>
36
- `}].forEach(i=>{const a=document.createElement("button");a.className="align-option-button",a.innerHTML=i.icon,this.value===i.name&&a.classList.add("selected"),a.addEventListener("click",()=>{var c;n.querySelectorAll(".align-option-button").forEach(r=>r.classList.remove("selected")),a.classList.add("selected"),this.value=i.name,(c=this.onChange)==null||c.call(this,this.value)}),n.appendChild(a)}),t.appendChild(n),t}}class I extends g{constructor(t){super(t),this.inputType="button"}draw(){const t=document.createElement("button");t.className="button-setting "+(this.props.className||""),t.textContent=this.props.label,t.addEventListener("click",()=>{this.props.onClick&&this.props.onClick()});const e=document.createElement("div");return e.className="button-setting-wrapper "+(this.props.wrapperClassName||""),e.appendChild(t),e}}class H extends g{constructor(t={}){super(t),this.inputType={width:"number",height:"number"},this.isUpdating=!1,this.value||(this.value={width:100,height:100}),this.locked=t.locked??!1,this.value.height===0&&(this.value.height=1),this.aspectRatio=this.value.width/this.value.height,this.widthSetting=new u({title:"Width",default:this.value.width,suffix:"px",minValue:t.minWidth??1,maxValue:t.maxWidth,icon:O}),this.heightSetting=new u({title:"Height",default:this.value.height,suffix:"px",minValue:t.minHeight??1,maxValue:t.maxHeight,icon:R}),this.widthSetting.setOnChange(e=>{var i;if(this.isUpdating||isNaN(e)||e<1)return;this.isUpdating=!0;let n=e,s=this.value.height;this.locked&&isFinite(this.aspectRatio)&&!isNaN(this.aspectRatio)&&(s=Math.round(n/this.aspectRatio),s<1&&(s=1)),this.value={width:n,height:s},s!==0&&(this.aspectRatio=n/s),(i=this.onChange)==null||i.call(this,this.value),this.heightSetting.setValue(s),this.isUpdating=!1}),this.heightSetting.setOnChange(e=>{var i;if(this.isUpdating||isNaN(e)||e<1)return;this.isUpdating=!0;let n=e,s=this.value.width;this.locked&&isFinite(this.aspectRatio)&&!isNaN(this.aspectRatio)&&(s=Math.round(n*this.aspectRatio),s<1&&(s=1)),this.value={width:s,height:n},n!==0&&(this.aspectRatio=s/n),(i=this.onChange)==null||i.call(this,this.value),this.widthSetting.setValue(s),this.isUpdating=!1})}toggleLock(t){if(this.locked=!this.locked,this.locked){const e=this.value.width,n=this.value.height;n!==0&&(this.aspectRatio=e/n)}t.innerHTML=this.getLockSVG(this.locked)}getLockSVG(t){return`
47
+ `}].forEach(s=>{const a=document.createElement("button");a.className="align-option-button",a.innerHTML=s.icon,this.value===s.name&&a.classList.add("selected"),a.addEventListener("click",()=>{var o;i.querySelectorAll(".align-option-button").forEach(l=>l.classList.remove("selected")),a.classList.add("selected"),this.value=s.name,(o=this.onChange)==null||o.call(this,this.value)}),i.appendChild(a)}),t.appendChild(i),t}}class A extends d{constructor(t){super(t),this.inputType="button"}draw(){const t=document.createElement("button");t.className="button-setting "+(this.props.className||""),t.textContent=this.props.label,t.addEventListener("click",()=>{this.props.onClick&&this.props.onClick()});const e=document.createElement("div");return e.className="button-setting-wrapper "+(this.props.wrapperClassName||""),e.appendChild(t),e}}class j extends d{constructor(t={}){super(t),this.inputType={width:"number",height:"number"},this.isUpdating=!1,this.value||(this.value={width:100,height:100}),this.locked=t.locked??!1,this.value.height===0&&(this.value.height=1),this.aspectRatio=this.value.width/this.value.height,this.widthSetting=new f({title:"Width",default:this.value.width,suffix:"px",minValue:t.minWidth??1,maxValue:t.maxWidth,icon:U}),this.heightSetting=new f({title:"Height",default:this.value.height,suffix:"px",minValue:t.minHeight??1,maxValue:t.maxHeight,icon:Z}),this.widthSetting.setOnChange(e=>{var s;if(this.isUpdating||isNaN(e)||e<1)return;this.isUpdating=!0;let i=e,n=this.value.height;this.locked&&isFinite(this.aspectRatio)&&!isNaN(this.aspectRatio)&&(n=Math.round(i/this.aspectRatio),n<1&&(n=1)),this.value={width:i,height:n},n!==0&&(this.aspectRatio=i/n),(s=this.onChange)==null||s.call(this,this.value),this.heightSetting.setValue(n),this.isUpdating=!1}),this.heightSetting.setOnChange(e=>{var s;if(this.isUpdating||isNaN(e)||e<1)return;this.isUpdating=!0;let i=e,n=this.value.width;this.locked&&isFinite(this.aspectRatio)&&!isNaN(this.aspectRatio)&&(n=Math.round(i*this.aspectRatio),n<1&&(n=1)),this.value={width:n,height:i},i!==0&&(this.aspectRatio=n/i),(s=this.onChange)==null||s.call(this,this.value),this.widthSetting.setValue(n),this.isUpdating=!1})}toggleLock(t){if(this.locked=!this.locked,this.locked){const e=this.value.width,i=this.value.height;i!==0&&(this.aspectRatio=e/i)}t.innerHTML=this.getLockSVG(this.locked)}getLockSVG(t){return t?`
37
48
  <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none">
38
49
  <path d="M2.91663 4.58333V3.33333C2.91663 2.18274 3.84937 1.25 4.99996 1.25C6.00786 1.25 6.84859 1.96573 7.04162 2.91667M3.66663 8.75H6.33329C7.03336 8.75 7.38339 8.75 7.65078 8.61376C7.88598 8.49392 8.07721 8.30269 8.19705 8.06749C8.33329 7.8001 8.33329 7.45007 8.33329 6.75V6.58333C8.33329 5.88327 8.33329 5.53323 8.19705 5.26584C8.07721 5.03064 7.88598 4.83942 7.65078 4.71958C7.38339 4.58333 7.03336 4.58333 6.33329 4.58333H3.66663C2.96656 4.58333 2.61653 4.58333 2.34914 4.71958C2.11394 4.83942 1.92271 5.03064 1.80287 5.26584C1.66663 5.53323 1.66663 5.88327 1.66663 6.58333V6.75C1.66663 7.45007 1.66663 7.8001 1.80287 8.06749C1.92271 8.30269 2.11394 8.49392 2.34914 8.61376C2.61653 8.75 2.96656 8.75 3.66663 8.75Z" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
39
50
  </svg>
40
- `}draw(){const t=document.createElement("div");t.className="dimension-setting-container";const e=this.widthSetting.draw(),n=this.heightSetting.draw(),s=document.createElement("div");s.className="dimension-bracket";const i=document.createElement("span");return i.className="dimension-lock-icon",i.innerHTML=this.getLockSVG(this.locked),i.onclick=()=>this.toggleLock(i),s.appendChild(i),t.appendChild(e),t.appendChild(s),t.appendChild(n),t}}const O=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
51
+ `:`
52
+ <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none">
53
+ <path d="M2.91663 4.58333V3.33333C2.91663 2.18274 3.84937 1.25 4.99996 1.25M3.66663 8.75H6.33329C7.03336 8.75 7.38339 8.75 7.65078 8.61376C7.88598 8.49392 8.07721 8.30269 8.19705 8.06749C8.33329 7.8001 8.33329 7.45007 8.33329 6.75V6.58333C8.33329 5.88327 8.33329 5.53323 8.19705 5.26584C8.07721 5.03064 7.88598 4.83942 7.65078 4.71958C7.38339 4.58333 7.03336 4.58333 6.33329 4.58333H3.66663C2.96656 4.58333 2.61653 4.58333 2.34914 4.71958C2.11394 4.83942 1.92271 5.03064 1.80287 5.26584C1.66663 5.53323 1.66663 5.88327 1.66663 6.58333V6.75C1.66663 7.45007 1.66663 7.8001 1.80287 8.06749C1.92271 8.30269 2.11394 8.49392 2.34914 8.61376C2.61653 8.75 2.96656 8.75 3.66663 8.75Z" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
54
+ </svg>
55
+ `}draw(){const t=document.createElement("div");t.className="dimension-setting-container";const e=this.widthSetting.draw(),i=this.heightSetting.draw(),n=document.createElement("div");n.className="dimension-bracket";const s=document.createElement("span");return s.className="dimension-lock-icon",s.innerHTML=this.getLockSVG(this.locked),s.onclick=()=>this.toggleLock(s),n.appendChild(s),t.appendChild(e),t.appendChild(n),t.appendChild(i),t}}const U=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
41
56
  <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"/>
42
- </svg>`,R=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
57
+ </svg>`,Z=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
43
58
  <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"/>
44
- </svg>`;exports.AlignSetting=V;exports.ButtonSetting=I;exports.ColorSetting=S;exports.DimensionSetting=H;exports.MarginSettingGroup=E;exports.NumberSetting=u;exports.OpacitySetting=M;exports.SelectSetting=T;exports.Setting=g;exports.SettingGroup=k;exports.StringSetting=N;exports.iterateSettings=x;
59
+ </svg>`,W=`
60
+ <svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" viewBox="0 0 15 16" fill="none">
61
+ <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"/>
62
+ </svg>
63
+ `;class F extends d{constructor(t={}){super(t),this.inputType="button",!this.value&&t.defaultUrl&&(this.value=t.defaultUrl)}draw(){const t=document.createElement("div");t.className="upload-setting-wrapper";const e=document.createElement("img");e.className="upload-preview",e.src=this.value||this.props.defaultUrl||"";const i=document.createElement("button");i.className="upload-button",i.innerHTML=`
64
+ <span class="upload-icon">${W}</span>
65
+ <span class="upload-label">Upload</span>
66
+ `;const n=document.createElement("input");return n.type="file",n.accept="image/*",n.style.display="none",i.onclick=()=>{n.click()},n.onchange=()=>{var a;const s=(a=n.files)==null?void 0:a[0];if(s){const o=new FileReader;o.onload=l=>{var c,g;const h=(c=l.target)==null?void 0:c.result;this.value=h,e.src=h,(g=this.onChange)==null||g.call(this,h)},o.readAsDataURL(s)}},t.appendChild(e),t.appendChild(i),t.appendChild(n),t}}exports.AlignSetting=O;exports.ButtonSetting=A;exports.ColorSetting=T;exports.DimensionSetting=j;exports.MarginSettingGroup=L;exports.NumberSetting=f;exports.OpacitySetting=I;exports.SelectSetting=B;exports.Setting=d;exports.SettingGroup=m;exports.StringSetting=k;exports.UploadSetting=F;exports.iterateSettings=H;
package/dist/builder-settings-types.es.js CHANGED
@@ -1,52 +1,72 @@
1
- const x = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
2
- let f = (o = 21) => {
3
- let t = "", e = crypto.getRandomValues(new Uint8Array(o |= 0));
4
- for (; o--; )
5
- t += x[e[o] & 63];
1
+ const H = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
2
+ let x = (r = 21) => {
3
+ let t = "", e = crypto.getRandomValues(new Uint8Array(r |= 0));
4
+ for (; r--; )
5
+ t += H[e[r] & 63];
6
6
  return t;
7
7
  };
8
- function k(o, t) {
9
- for (const e in o)
10
- if (o.hasOwnProperty(e)) {
11
- const n = o[e];
12
- t(e, n);
8
+ function k(r, t) {
9
+ for (const e in r)
10
+ if (r.hasOwnProperty(e)) {
11
+ const i = r[e];
12
+ t(e, i);
13
13
  }
14
14
  }
15
- class N {
15
+ class v {
16
+ constructor(t) {
17
+ this.id = t.id || x(), this.title = t.title, this.settings = t.settings, Object.assign(this, t.settings);
18
+ }
16
19
  setOnChange(t) {
17
- this.onChange = t, k(this.settings, (e, n) => {
18
- n.setOnChange(t);
19
- });
20
+ return this.onChange = t, k(this.settings, (e, i) => {
21
+ i.setOnChange(t);
22
+ }), this;
20
23
  }
21
- constructor(t) {
22
- this.id = t.id || f(), this.title = t.title, this.settings = t.settings, Object.assign(this, t.settings);
24
+ /**
25
+ * Returns all values if called with no arguments,
26
+ * or returns only the values for a single child if a key is provided.
27
+ */
28
+ getValues(t) {
29
+ if (t === void 0) {
30
+ const e = {};
31
+ for (const i in this.settings)
32
+ if (this.settings.hasOwnProperty(i)) {
33
+ const n = this.settings[i];
34
+ n instanceof v ? e[i] = n.getValues() : e[i] = n.value;
35
+ }
36
+ return e;
37
+ } else {
38
+ const e = this.settings[t];
39
+ return e ? e instanceof v ? e.getValues() : e.value : void 0;
40
+ }
23
41
  }
24
42
  draw() {
25
43
  const t = document.createElement("div");
26
44
  t.className = "setting-group";
27
45
  const e = document.createElement("div");
28
46
  e.className = "setting-group-title";
29
- const n = document.createElement("h3");
30
- n.textContent = this.title;
31
- const s = document.createElement("span");
32
- s.className = "setting-group-arrow", s.innerHTML = `
47
+ const i = document.createElement("h3");
48
+ i.textContent = this.title;
49
+ const n = document.createElement("span");
50
+ n.className = "setting-group-arrow", n.innerHTML = `
33
51
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
34
52
  <path d="M5 7.5L10 12.5L15 7.5" stroke="#344054" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
35
53
  </svg>
36
- `;
37
- const i = document.createElement("div");
38
- i.className = "setting-group-content";
39
- for (const a in this.settings) {
40
- const r = this.settings[a].draw();
41
- i.appendChild(r);
42
- }
43
- return e.onclick = () => {
44
- i.classList.toggle("collapsed"), s.classList.toggle("rotated");
45
- }, e.appendChild(n), e.appendChild(s), t.appendChild(e), t.appendChild(i), t;
54
+ `, e.onclick = () => {
55
+ const a = t.querySelector(".setting-group-content");
56
+ a && (a.classList.toggle("collapsed"), n.classList.toggle("rotated"));
57
+ }, e.appendChild(i), e.appendChild(n);
58
+ const s = document.createElement("div");
59
+ s.className = "setting-group-content";
60
+ for (const a in this.settings)
61
+ if (this.settings.hasOwnProperty(a)) {
62
+ const o = this.settings[a];
63
+ s.appendChild(o.draw());
64
+ }
65
+ return t.appendChild(e), t.appendChild(s), t;
46
66
  }
47
67
  }
48
- function L(o) {
49
- switch (o) {
68
+ function N(r) {
69
+ switch (r) {
50
70
  case "number":
51
71
  return 0;
52
72
  case "text":
@@ -63,12 +83,12 @@ function L(o) {
63
83
  return "";
64
84
  }
65
85
  }
66
- class C {
86
+ class d {
67
87
  constructor(t = {}) {
68
- this.props = t, this.id = t.id || f(), this.value = this.props.default, this.title = t.title || "";
88
+ this.props = t, this.id = t.id || x(), this.value = this.props.default, this.title = t.title || "";
69
89
  }
70
90
  setOnChange(t) {
71
- this.onChange = t;
91
+ return this.onChange = t, this;
72
92
  }
73
93
  setValue(t) {
74
94
  this.value = t, this.inputEl && (this.inputEl.value = String(t)), this.onChange && this.onChange(t);
@@ -77,89 +97,133 @@ class C {
77
97
  t = { ...this.props.inputProps, ...t };
78
98
  const e = document.createElement("div");
79
99
  if (e.className = t.wrapperClassName || "", t.title || t.icon) {
80
- const i = document.createElement("div");
81
- if (i.className = "icon-container", t.icon) {
100
+ const s = document.createElement("div");
101
+ if (s.className = "icon-container", t.icon) {
82
102
  const a = this.createIcon(t.icon, t.iconClassName);
83
- i.appendChild(a);
103
+ s.appendChild(a);
84
104
  }
85
105
  if (t.title) {
86
106
  const a = this.createLabel(t.title, t.labelClassName);
87
- i.appendChild(a);
107
+ s.appendChild(a);
88
108
  }
89
- e.appendChild(i);
109
+ e.appendChild(s);
90
110
  }
91
- const n = document.createElement("div");
92
- n.className = t.wrapperClassName || "";
93
- const s = document.createElement("input");
94
- return this.inputEl = s, s.value = String(t.value || L(t.inputType)), s.type = t.inputType, s.placeholder = t.placeholder || "", s.className = t.inputClassName || "", s.oninput = (i) => {
95
- const a = i.target;
96
- let c = a.value;
97
- t.inputType === "number" ? c = Number(a.value) : (t.inputType === "color" || t.inputType === "date") && (c = a.value), this.value = c, this.onChange && this.onChange(this.value);
98
- }, t.inputCustomizer && t.inputCustomizer(s), n.appendChild(s), e.appendChild(n), e;
111
+ const i = document.createElement("div");
112
+ i.className = t.wrapperClassName || "";
113
+ const n = document.createElement("input");
114
+ return this.inputEl = n, n.value = String(t.value || N(t.inputType)), n.type = t.inputType, n.placeholder = t.placeholder || "", n.className = t.inputClassName || "", n.oninput = (s) => {
115
+ const a = s.target;
116
+ let o = a.value;
117
+ t.inputType === "number" ? o = Number(a.value) : (t.inputType === "color" || t.inputType === "date") && (o = a.value), this.value = o, this.onChange && this.onChange(this.value);
118
+ }, t.inputCustomizer && t.inputCustomizer(n), i.appendChild(n), e.appendChild(i), e;
99
119
  }
100
120
  createLabel(t, e) {
101
- const n = document.createElement("span");
102
- return n.textContent = t, n.className = "input-label " + (e || ""), n;
121
+ const i = document.createElement("span");
122
+ return i.textContent = t, i.className = "input-label " + (e || ""), i;
103
123
  }
104
124
  createIcon(t, e) {
105
- const n = document.createElement("span");
106
- return n.className = "input-icon " + (e || ""), n.innerHTML = t, n;
125
+ const i = document.createElement("span");
126
+ return i.className = "input-icon " + (e || ""), i.innerHTML = t, i;
107
127
  }
108
128
  }
109
- class u extends C {
110
- constructor(t = {}) {
111
- super(t), this.inputType = "number";
129
+ class m extends d {
130
+ constructor(t) {
131
+ super({
132
+ ...t,
133
+ default: t.default !== void 0 ? t.default : "auto"
134
+ }), this.inputType = "number", this.value = t.default !== void 0 ? t.default : "auto";
112
135
  }
113
136
  draw() {
114
- const t = (i) => {
115
- this.props.minValue !== void 0 && (i.min = String(this.props.minValue)), this.props.maxValue !== void 0 && (i.max = String(this.props.maxValue)), this.props.className && i.classList.add(this.props.className), i.addEventListener("input", () => {
116
- const a = this.props.minValue ?? Number.MIN_SAFE_INTEGER, c = this.props.maxValue ?? Number.MAX_SAFE_INTEGER;
117
- let r = Number(i.value);
118
- r < a && (r = a), r > c && (r = c), i.value = String(r);
119
- });
120
- }, e = this.createInput({
137
+ const t = this.value === "auto" ? "text" : "number", e = (o) => {
138
+ this.value !== "auto" && (this.props.minValue !== void 0 && (o.min = String(this.props.minValue)), this.props.maxValue !== void 0 && (o.max = String(this.props.maxValue)), this.props.className && o.classList.add(this.props.className), o.addEventListener("input", () => {
139
+ const l = this.props.minValue ?? Number.MIN_SAFE_INTEGER, h = this.props.maxValue ?? Number.MAX_SAFE_INTEGER;
140
+ let c = Number(o.value);
141
+ c < l && (c = l), c > h && (c = h), o.value = String(c);
142
+ }));
143
+ }, i = this.createInput({
121
144
  value: this.value,
122
- inputType: this.inputType,
145
+ inputType: t,
123
146
  title: this.props.title,
124
147
  icon: this.props.icon,
125
148
  inputClassName: "number-setting-input " + (this.props.inputClassName || ""),
126
149
  wrapperClassName: "number-setting-wrapper " + (this.props.wrapperClassName || ""),
127
- inputCustomizer: t
150
+ inputCustomizer: e,
151
+ placeholder: this.value === "auto" ? "auto" : ""
128
152
  });
129
153
  if (!this.props.suffix || this.props.suffix === "none")
130
- return e;
131
- e.classList.add("suffix-wrapper");
132
- const n = e.querySelector(
154
+ return i;
155
+ i.classList.add("suffix-wrapper");
156
+ const n = i.querySelector(
133
157
  "input.number-setting-input"
134
158
  );
135
159
  n && (n.style.paddingRight = "35px");
136
160
  const s = document.createElement("span");
137
- return s.className = "suffix-label", s.textContent = this.props.suffix, e.appendChild(s), e;
161
+ s.className = "suffix-label", s.textContent = this.props.suffix, i.appendChild(s);
162
+ const a = i.querySelector("input");
163
+ return a && (a.oninput = (o) => {
164
+ const l = o.target.value.trim();
165
+ if (l.toLowerCase() === "auto")
166
+ this.value = "auto";
167
+ else {
168
+ const h = Number(l);
169
+ isNaN(h) || (this.value = h);
170
+ }
171
+ this.onChange && this.onChange(this.value);
172
+ }), i;
138
173
  }
139
174
  }
140
- class S extends N {
175
+ class B extends v {
141
176
  constructor() {
142
177
  super({
143
- title: "Margin",
178
+ title: "Margins",
144
179
  settings: {
145
- margin: new u({ title: "Margin All" }),
146
- marginTop: new u({ title: "Margin Top" }),
147
- marginRight: new u({ title: "Margin Right" }),
148
- marginBottom: new u({ title: "Margin Bottom" }),
149
- marginLeft: new u({ title: "Margin Left" })
180
+ marginTop: new m({
181
+ title: "Top",
182
+ icon: b,
183
+ suffix: "px",
184
+ default: "auto"
185
+ }),
186
+ marginRight: new m({
187
+ title: "Right",
188
+ icon: L,
189
+ suffix: "px",
190
+ default: 0
191
+ }),
192
+ marginBottom: new m({
193
+ title: "Bottom",
194
+ icon: E,
195
+ suffix: "px",
196
+ default: 0
197
+ }),
198
+ marginLeft: new m({
199
+ title: "Left",
200
+ icon: y,
201
+ suffix: "px",
202
+ default: 0
203
+ })
150
204
  }
151
205
  });
152
206
  }
153
207
  getCssCode() {
208
+ const t = typeof this.settings.marginTop.value == "number" ? `${this.settings.marginTop.value}px` : this.settings.marginTop.value, e = typeof this.settings.marginRight.value == "number" ? `${this.settings.marginRight.value}px` : this.settings.marginRight.value, i = typeof this.settings.marginBottom.value == "number" ? `${this.settings.marginBottom.value}px` : this.settings.marginBottom.value, n = typeof this.settings.marginLeft.value == "number" ? `${this.settings.marginLeft.value}px` : this.settings.marginLeft.value;
154
209
  return `
155
- margin-botton: ${this.settings.marginBottom.value}px;
156
- margin-top: ${this.settings.marginTop.value}px;
157
- margin-right: ${this.settings.marginRight.value}px;
158
- margin-left: ${this.settings.marginLeft.value}px;
159
- `;
210
+ margin-top: ${t};
211
+ margin-right: ${e};
212
+ margin-bottom: ${i};
213
+ margin-left: ${n};
214
+ `;
160
215
  }
161
216
  }
162
- class E extends C {
217
+ const b = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
218
+ <path d="M2.25 16.25H2.2575M2.25 9.5H2.2575M2.25 12.875H2.2575M2.25 6.125H2.2575M5.625 16.25H5.6325M5.625 9.5H5.6325M12.375 16.25H12.3825M12.375 9.5H12.3825M9 16.25H9.0075M9 9.5H9.0075M9 12.875H9.0075M9 6.125H9.0075M15.75 16.25H15.7575M15.75 9.5H15.7575M15.75 12.875H15.7575M15.75 6.125H15.7575M15.75 2.75H2.25" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
219
+ </svg>`, L = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 16 15" fill="none">
220
+ <path d="M4.625 0.75H4.6325M4.625 7.5H4.6325M4.625 14.25H4.6325M11.375 0.75H11.3825M11.375 7.5H11.3825M11.375 14.25H11.3825M8 0.75H8.0075M8 7.5H8.0075M8 14.25H8.0075M8 10.875H8.0075M8 4.125H8.0075M1.25 0.75H1.2575M1.25 7.5H1.2575M1.25 14.25H1.2575M1.25 10.875H1.2575M1.25 4.125H1.2575M14.75 14.25V0.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
221
+ </svg>`, E = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
222
+ <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"/>
223
+ </svg>`, y = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
224
+ <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"/>
225
+ </svg>`;
226
+ class S extends d {
163
227
  constructor(t = {}) {
164
228
  super(t), this.inputType = "text";
165
229
  }
@@ -179,12 +243,12 @@ class E extends C {
179
243
  });
180
244
  }
181
245
  }
182
- const w = "<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>";
183
- class T extends E {
246
+ const M = "<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>";
247
+ class A extends S {
184
248
  constructor(t) {
185
249
  super({
186
250
  ...t,
187
- icon: t.icon || w,
251
+ icon: t.icon || M,
188
252
  title: t.title || "Color"
189
253
  }), this.inputType = "color";
190
254
  }
@@ -193,62 +257,96 @@ class T extends E {
193
257
  t.className = "color-setting-wrapper";
194
258
  const e = document.createElement("div");
195
259
  e.className = "icon-container";
196
- const n = this.createIcon(this.props.icon || w), s = this.createLabel(this.title || "Color");
197
- console.log("label:", s), e.appendChild(n), e.appendChild(s);
198
- const i = document.createElement("div");
199
- i.className = "color-input-wrapper";
200
- const a = /^([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/, c = (p) => {
201
- const l = p.value.startsWith("#") ? p.value.slice(1) : p.value;
202
- return a.test(l) ? (p.style.border = "", !0) : (p.style.border = "1px solid red", !1);
203
- }, r = document.createElement("div");
204
- r.className = "color-preview", r.style.backgroundColor = this.value || "";
205
- const d = this.createInput({
260
+ const i = this.createIcon(this.props.icon || M), n = this.createLabel(this.title || "Color");
261
+ e.appendChild(i), e.appendChild(n);
262
+ const s = document.createElement("div");
263
+ s.className = "color-input-wrapper";
264
+ const a = /^([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/, o = (p) => {
265
+ const u = p.value.startsWith("#") ? p.value.slice(1) : p.value;
266
+ return a.test(u) ? (p.style.border = "", !0) : (p.style.border = "1px solid red", !1);
267
+ }, l = document.createElement("div");
268
+ l.className = "color-preview", l.style.backgroundColor = this.value || "";
269
+ const h = this.createInput({
206
270
  value: this.value,
207
271
  inputType: "text",
208
272
  inputClassName: "color-text-input"
209
- }), h = d.querySelector(
273
+ }), c = h.querySelector(
210
274
  "input"
211
- ), v = this.createInput({
275
+ ), g = this.createInput({
212
276
  value: this.value,
213
277
  inputType: this.inputType,
214
278
  inputClassName: "color-picker"
215
- }), m = v.querySelector(
279
+ }), f = g.querySelector(
216
280
  "input"
217
281
  );
218
- return h.oninput = (p) => {
219
- var g;
220
- let l = p.target.value.trim();
221
- l.charAt(0) !== "#" && (l = "#" + l, h.value = l), c(h) && (this.value = l, (g = this.onChange) == null || g.call(this, l), m.value = l, r.style.backgroundColor = l);
222
- }, m.oninput = (p) => {
223
- var g;
224
- let l = p.target.value;
225
- l.charAt(0) !== "#" && (l = "#" + l, m.value = l), this.value = l, (g = this.onChange) == null || g.call(this, l), h.value = l, r.style.backgroundColor = l, c(h);
226
- }, i.appendChild(r), i.appendChild(v), i.appendChild(d), t.appendChild(e), t.appendChild(i), t;
282
+ return c.oninput = (p) => {
283
+ var C;
284
+ let u = p.target.value.trim();
285
+ u.charAt(0) !== "#" && (u = "#" + u, c.value = u), o(c) && (this.value = u, (C = this.onChange) == null || C.call(this, u), f.value = u, l.style.backgroundColor = u);
286
+ }, f.oninput = (p) => {
287
+ var C;
288
+ let u = p.target.value;
289
+ u.charAt(0) !== "#" && (u = "#" + u, f.value = u), this.value = u, (C = this.onChange) == null || C.call(this, u), c.value = u, l.style.backgroundColor = u, o(c);
290
+ }, s.appendChild(l), s.appendChild(g), s.appendChild(h), t.appendChild(e), t.appendChild(s), t;
227
291
  }
228
292
  }
229
- class V extends u {
293
+ class w extends d {
294
+ constructor(t = {}) {
295
+ super(t), this.inputType = "number";
296
+ }
297
+ draw() {
298
+ const t = (s) => {
299
+ 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", () => {
300
+ const a = this.props.minValue ?? Number.MIN_SAFE_INTEGER, o = this.props.maxValue ?? Number.MAX_SAFE_INTEGER;
301
+ let l = Number(s.value);
302
+ l < a && (l = a), l > o && (l = o), s.value = String(l);
303
+ });
304
+ }, e = this.createInput({
305
+ value: this.value,
306
+ inputType: this.inputType,
307
+ title: this.props.title,
308
+ icon: this.props.icon,
309
+ inputClassName: "number-setting-input " + (this.props.inputClassName || ""),
310
+ wrapperClassName: "number-setting-wrapper " + (this.props.wrapperClassName || ""),
311
+ inputCustomizer: t
312
+ });
313
+ if (!this.props.suffix || this.props.suffix === "none")
314
+ return e;
315
+ e.classList.add("suffix-wrapper");
316
+ const i = e.querySelector(
317
+ "input.number-setting-input"
318
+ );
319
+ i && (i.style.paddingRight = "35px");
320
+ const n = document.createElement("span");
321
+ return n.className = "suffix-label", n.textContent = this.props.suffix, e.appendChild(n), e;
322
+ }
323
+ }
324
+ class O extends w {
230
325
  constructor(t) {
231
326
  super({
232
327
  ...t,
233
328
  minValue: 0,
234
329
  maxValue: 100,
235
- icon: t.icon || b,
330
+ icon: t.icon || V,
236
331
  title: t.title || "Opacity"
237
332
  }), this.inputType = "number";
238
333
  }
239
334
  }
240
- const b = `
335
+ const V = `
241
336
  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
242
- <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"/>
243
- <path d="M9.00026 17.5623C6.84776 17.5623 4.82278 16.7223 3.30028 15.1998C3.19528 15.0948 3.13525 14.9523 3.13525 14.8023C3.13525 14.6523 3.19528 14.5098 3.30028 14.4048L13.9052 3.79984C14.1227 3.58234 14.4827 3.58234 14.7002 3.79984C16.2227 5.32234 17.0628 7.34734 17.0628 9.49984C17.0628 13.9473 13.4478 17.5623 9.00026 17.5623ZM4.50777 14.7873C5.76027 15.8523 7.33526 16.4373 9.00026 16.4373C12.8253 16.4373 15.9378 13.3248 15.9378 9.49984C15.9378 7.83484 15.3527 6.25984 14.2878 5.00734L4.50777 14.7873Z" fill="#667085"/>
244
- </svg>
337
+ <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"/>
338
+ <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"/>
339
+ <path d="M10.0575 17.4873C9.91496 17.4873 9.77248 17.4348 9.65998 17.3223L5.41496 13.0773C5.19746 12.8598 5.19746 12.4998 5.41496 12.2823C5.63246 12.0648 5.9925 12.0648 6.21 12.2823L10.455 16.5273C10.6725 16.7448 10.6725 17.1048 10.455 17.3223C10.35 17.4348 10.2075 17.4873 10.0575 17.4873Z" fill="#667085"/>
340
+ <path d="M13.4025 15.5225C13.26 15.5225 13.1175 15.47 13.005 15.3575L8.06999 10.4225C7.85249 10.205 7.85249 9.84498 8.06999 9.62748C8.28749 9.40998 8.64748 9.40998 8.86498 9.62748L13.8 14.5625C14.0175 14.78 14.0175 15.14 13.8 15.3575C13.6875 15.47 13.545 15.5225 13.4025 15.5225Z" fill="#667085"/>
341
+ <path d="M15.84 12.6648C15.6975 12.6648 15.555 12.6123 15.4425 12.4998L10.725 7.78234C10.5075 7.56484 10.5075 7.20484 10.725 6.98734C10.9425 6.76984 11.3025 6.76984 11.52 6.98734L16.2375 11.7048C16.455 11.9223 16.455 12.2823 16.2375 12.4998C16.1325 12.6048 15.99 12.6648 15.84 12.6648Z" fill="#667085"/>
342
+ </svg>
245
343
  `;
246
- class I extends C {
344
+ class j extends d {
247
345
  constructor(t = {}) {
248
346
  super(t), this.inputType = "select", this.props.options || (this.props.options = []), this.props.getOptionsAsync && this.props.getOptionsAsync().then((e) => {
249
- this.props.options = [...this.props.options, ...e], e.forEach((n) => {
250
- var s;
251
- (s = this.selectNode) == null || s.appendChild(this.createOption(n));
347
+ this.props.options = [...this.props.options, ...e], e.forEach((i) => {
348
+ var n;
349
+ (n = this.selectNode) == null || n.appendChild(this.createOption(i));
252
350
  });
253
351
  }).catch((e) => {
254
352
  console.error("Failed to fetch async options:", e);
@@ -259,25 +357,25 @@ class I extends C {
259
357
  return e.value = t.value, e.textContent = t.name, e;
260
358
  }
261
359
  draw() {
262
- var c, r;
360
+ var o, l;
263
361
  const t = document.createElement("div");
264
362
  t.classList.add("select-container");
265
363
  const e = document.createElement("div");
266
364
  e.className = "icon-container";
267
- const n = this.createIcon(this.props.icon || ""), s = this.createLabel(this.props.title || ""), i = document.createElement("select");
268
- return this.selectNode = i, i.classList.add("select"), i.onchange = (d) => {
269
- var h;
270
- this.value = d.target.value, (h = this.onChange) == null || h.call(this, d.target.value);
365
+ const i = this.createIcon(this.props.icon || ""), n = this.createLabel(this.props.title || ""), s = document.createElement("select");
366
+ return this.selectNode = s, s.classList.add("select"), s.onchange = (h) => {
367
+ var c;
368
+ this.value = h.target.value, (c = this.onChange) == null || c.call(this, h.target.value);
271
369
  }, [
272
370
  ...this.props.options || [],
273
- ...((r = (c = this.props).getOptions) == null ? void 0 : r.call(c)) || []
274
- ].forEach((d) => {
275
- const h = this.createOption(d);
276
- i.appendChild(h);
277
- }), this.value && (i.value = this.value), e.appendChild(n), e.appendChild(s), t.appendChild(e), t.appendChild(i), t;
371
+ ...((l = (o = this.props).getOptions) == null ? void 0 : l.call(o)) || []
372
+ ].forEach((h) => {
373
+ const c = this.createOption(h);
374
+ s.appendChild(c);
375
+ }), this.value && (s.value = this.value), e.appendChild(i), e.appendChild(n), t.appendChild(e), t.appendChild(s), t;
278
376
  }
279
377
  }
280
- class H extends C {
378
+ class Z extends d {
281
379
  constructor(t = {}) {
282
380
  super(t), this.inputType = "button", this.value || (this.value = "center");
283
381
  }
@@ -286,8 +384,8 @@ class H extends C {
286
384
  t.className = "align-setting-wrapper";
287
385
  const e = document.createElement("label");
288
386
  e.className = "align-setting-label", e.textContent = this.title || "Align", t.appendChild(e);
289
- const n = document.createElement("div");
290
- return n.className = "align-options-container", [
387
+ const i = document.createElement("div");
388
+ return i.className = "align-options-container", [
291
389
  {
292
390
  name: "left",
293
391
  icon: `
@@ -321,16 +419,16 @@ class H extends C {
321
419
  </svg>
322
420
  `
323
421
  }
324
- ].forEach((i) => {
422
+ ].forEach((s) => {
325
423
  const a = document.createElement("button");
326
- a.className = "align-option-button", a.innerHTML = i.icon, this.value === i.name && a.classList.add("selected"), a.addEventListener("click", () => {
327
- var c;
328
- n.querySelectorAll(".align-option-button").forEach((r) => r.classList.remove("selected")), a.classList.add("selected"), this.value = i.name, (c = this.onChange) == null || c.call(this, this.value);
329
- }), n.appendChild(a);
330
- }), t.appendChild(n), t;
424
+ a.className = "align-option-button", a.innerHTML = s.icon, this.value === s.name && a.classList.add("selected"), a.addEventListener("click", () => {
425
+ var o;
426
+ i.querySelectorAll(".align-option-button").forEach((l) => l.classList.remove("selected")), a.classList.add("selected"), this.value = s.name, (o = this.onChange) == null || o.call(this, this.value);
427
+ }), i.appendChild(a);
428
+ }), t.appendChild(i), t;
331
429
  }
332
430
  }
333
- class R extends C {
431
+ class U extends d {
334
432
  constructor(t) {
335
433
  super(t), this.inputType = "button";
336
434
  }
@@ -343,36 +441,36 @@ class R extends C {
343
441
  return e.className = "button-setting-wrapper " + (this.props.wrapperClassName || ""), e.appendChild(t), e;
344
442
  }
345
443
  }
346
- class O extends C {
444
+ class W extends d {
347
445
  constructor(t = {}) {
348
- super(t), this.inputType = { width: "number", height: "number" }, this.isUpdating = !1, this.value || (this.value = { width: 100, height: 100 }), this.locked = t.locked ?? !1, this.value.height === 0 && (this.value.height = 1), this.aspectRatio = this.value.width / this.value.height, this.widthSetting = new u({
446
+ super(t), this.inputType = { width: "number", height: "number" }, this.isUpdating = !1, this.value || (this.value = { width: 100, height: 100 }), this.locked = t.locked ?? !1, this.value.height === 0 && (this.value.height = 1), this.aspectRatio = this.value.width / this.value.height, this.widthSetting = new w({
349
447
  title: "Width",
350
448
  default: this.value.width,
351
449
  suffix: "px",
352
450
  // Display "px" as the unit.
353
451
  minValue: t.minWidth ?? 1,
354
452
  maxValue: t.maxWidth,
355
- icon: M
453
+ icon: T
356
454
  // SVG icon defined at the bottom.
357
- }), this.heightSetting = new u({
455
+ }), this.heightSetting = new w({
358
456
  title: "Height",
359
457
  default: this.value.height,
360
458
  suffix: "px",
361
459
  minValue: t.minHeight ?? 1,
362
460
  maxValue: t.maxHeight,
363
- icon: y
461
+ icon: I
364
462
  }), this.widthSetting.setOnChange((e) => {
365
- var i;
463
+ var s;
366
464
  if (this.isUpdating || isNaN(e) || e < 1) return;
367
465
  this.isUpdating = !0;
368
- let n = e, s = this.value.height;
369
- this.locked && isFinite(this.aspectRatio) && !isNaN(this.aspectRatio) && (s = Math.round(n / this.aspectRatio), s < 1 && (s = 1)), this.value = { width: n, height: s }, s !== 0 && (this.aspectRatio = n / s), (i = this.onChange) == null || i.call(this, this.value), this.heightSetting.setValue(s), this.isUpdating = !1;
466
+ let i = e, n = this.value.height;
467
+ this.locked && isFinite(this.aspectRatio) && !isNaN(this.aspectRatio) && (n = Math.round(i / this.aspectRatio), n < 1 && (n = 1)), this.value = { width: i, height: n }, n !== 0 && (this.aspectRatio = i / n), (s = this.onChange) == null || s.call(this, this.value), this.heightSetting.setValue(n), this.isUpdating = !1;
370
468
  }), this.heightSetting.setOnChange((e) => {
371
- var i;
469
+ var s;
372
470
  if (this.isUpdating || isNaN(e) || e < 1) return;
373
471
  this.isUpdating = !0;
374
- let n = e, s = this.value.width;
375
- this.locked && isFinite(this.aspectRatio) && !isNaN(this.aspectRatio) && (s = Math.round(n * this.aspectRatio), s < 1 && (s = 1)), this.value = { width: s, height: n }, n !== 0 && (this.aspectRatio = s / n), (i = this.onChange) == null || i.call(this, this.value), this.widthSetting.setValue(s), this.isUpdating = !1;
472
+ let i = e, n = this.value.width;
473
+ this.locked && isFinite(this.aspectRatio) && !isNaN(this.aspectRatio) && (n = Math.round(i * this.aspectRatio), n < 1 && (n = 1)), this.value = { width: n, height: i }, i !== 0 && (this.aspectRatio = n / i), (s = this.onChange) == null || s.call(this, this.value), this.widthSetting.setValue(n), this.isUpdating = !1;
376
474
  });
377
475
  }
378
476
  /**
@@ -382,8 +480,8 @@ class O extends C {
382
480
  */
383
481
  toggleLock(t) {
384
482
  if (this.locked = !this.locked, this.locked) {
385
- const e = this.value.width, n = this.value.height;
386
- n !== 0 && (this.aspectRatio = e / n);
483
+ const e = this.value.width, i = this.value.height;
484
+ i !== 0 && (this.aspectRatio = e / i);
387
485
  }
388
486
  t.innerHTML = this.getLockSVG(this.locked);
389
487
  }
@@ -392,10 +490,14 @@ class O extends C {
392
490
  * @param isLocked Whether the dimension is currently locked.
393
491
  */
394
492
  getLockSVG(t) {
395
- return `
493
+ return t ? `
396
494
  <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none">
397
495
  <path d="M2.91663 4.58333V3.33333C2.91663 2.18274 3.84937 1.25 4.99996 1.25C6.00786 1.25 6.84859 1.96573 7.04162 2.91667M3.66663 8.75H6.33329C7.03336 8.75 7.38339 8.75 7.65078 8.61376C7.88598 8.49392 8.07721 8.30269 8.19705 8.06749C8.33329 7.8001 8.33329 7.45007 8.33329 6.75V6.58333C8.33329 5.88327 8.33329 5.53323 8.19705 5.26584C8.07721 5.03064 7.88598 4.83942 7.65078 4.71958C7.38339 4.58333 7.03336 4.58333 6.33329 4.58333H3.66663C2.96656 4.58333 2.61653 4.58333 2.34914 4.71958C2.11394 4.83942 1.92271 5.03064 1.80287 5.26584C1.66663 5.53323 1.66663 5.88327 1.66663 6.58333V6.75C1.66663 7.45007 1.66663 7.8001 1.80287 8.06749C1.92271 8.30269 2.11394 8.49392 2.34914 8.61376C2.61653 8.75 2.96656 8.75 3.66663 8.75Z" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
398
496
  </svg>
497
+ ` : `
498
+ <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none">
499
+ <path d="M2.91663 4.58333V3.33333C2.91663 2.18274 3.84937 1.25 4.99996 1.25M3.66663 8.75H6.33329C7.03336 8.75 7.38339 8.75 7.65078 8.61376C7.88598 8.49392 8.07721 8.30269 8.19705 8.06749C8.33329 7.8001 8.33329 7.45007 8.33329 6.75V6.58333C8.33329 5.88327 8.33329 5.53323 8.19705 5.26584C8.07721 5.03064 7.88598 4.83942 7.65078 4.71958C7.38339 4.58333 7.03336 4.58333 6.33329 4.58333H3.66663C2.96656 4.58333 2.61653 4.58333 2.34914 4.71958C2.11394 4.83942 1.92271 5.03064 1.80287 5.26584C1.66663 5.53323 1.66663 5.88327 1.66663 6.58333V6.75C1.66663 7.45007 1.66663 7.8001 1.80287 8.06749C1.92271 8.30269 2.11394 8.49392 2.34914 8.61376C2.61653 8.75 2.96656 8.75 3.66663 8.75Z" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
500
+ </svg>
399
501
  `;
400
502
  }
401
503
  /**
@@ -406,28 +508,64 @@ class O extends C {
406
508
  draw() {
407
509
  const t = document.createElement("div");
408
510
  t.className = "dimension-setting-container";
409
- const e = this.widthSetting.draw(), n = this.heightSetting.draw(), s = document.createElement("div");
410
- s.className = "dimension-bracket";
411
- const i = document.createElement("span");
412
- return i.className = "dimension-lock-icon", i.innerHTML = this.getLockSVG(this.locked), i.onclick = () => this.toggleLock(i), s.appendChild(i), t.appendChild(e), t.appendChild(s), t.appendChild(n), t;
511
+ const e = this.widthSetting.draw(), i = this.heightSetting.draw(), n = document.createElement("div");
512
+ n.className = "dimension-bracket";
513
+ const s = document.createElement("span");
514
+ return s.className = "dimension-lock-icon", s.innerHTML = this.getLockSVG(this.locked), s.onclick = () => this.toggleLock(s), n.appendChild(s), t.appendChild(e), t.appendChild(n), t.appendChild(i), t;
413
515
  }
414
516
  }
415
- const M = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
517
+ const T = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
416
518
  <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"/>
417
- </svg>`, y = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
519
+ </svg>`, I = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
418
520
  <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"/>
419
- </svg>`;
521
+ </svg>`, R = `
522
+ <svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" viewBox="0 0 15 16" fill="none">
523
+ <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"/>
524
+ </svg>
525
+ `;
526
+ class F extends d {
527
+ constructor(t = {}) {
528
+ super(t), this.inputType = "button", !this.value && t.defaultUrl && (this.value = t.defaultUrl);
529
+ }
530
+ draw() {
531
+ const t = document.createElement("div");
532
+ t.className = "upload-setting-wrapper";
533
+ const e = document.createElement("img");
534
+ e.className = "upload-preview", e.src = this.value || this.props.defaultUrl || "";
535
+ const i = document.createElement("button");
536
+ i.className = "upload-button", i.innerHTML = `
537
+ <span class="upload-icon">${R}</span>
538
+ <span class="upload-label">Upload</span>
539
+ `;
540
+ const n = document.createElement("input");
541
+ return n.type = "file", n.accept = "image/*", n.style.display = "none", i.onclick = () => {
542
+ n.click();
543
+ }, n.onchange = () => {
544
+ var a;
545
+ const s = (a = n.files) == null ? void 0 : a[0];
546
+ if (s) {
547
+ const o = new FileReader();
548
+ o.onload = (l) => {
549
+ var c, g;
550
+ const h = (c = l.target) == null ? void 0 : c.result;
551
+ this.value = h, e.src = h, (g = this.onChange) == null || g.call(this, h);
552
+ }, o.readAsDataURL(s);
553
+ }
554
+ }, t.appendChild(e), t.appendChild(i), t.appendChild(n), t;
555
+ }
556
+ }
420
557
  export {
421
- H as AlignSetting,
422
- R as ButtonSetting,
423
- T as ColorSetting,
424
- O as DimensionSetting,
425
- S as MarginSettingGroup,
426
- u as NumberSetting,
427
- V as OpacitySetting,
428
- I as SelectSetting,
429
- C as Setting,
430
- N as SettingGroup,
431
- E as StringSetting,
558
+ Z as AlignSetting,
559
+ U as ButtonSetting,
560
+ A as ColorSetting,
561
+ W as DimensionSetting,
562
+ B as MarginSettingGroup,
563
+ w as NumberSetting,
564
+ O as OpacitySetting,
565
+ j as SelectSetting,
566
+ d as Setting,
567
+ v as SettingGroup,
568
+ S as StringSetting,
569
+ F as UploadSetting,
432
570
  k as iterateSettings
433
571
  };
package/dist/index.css CHANGED
@@ -1 +1 @@
1
- @import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";.setting-group{padding:16px;display:flex;flex-direction:column;gap:8px;border-bottom:solid 1px var(--color-border);border-radius:8px;background-color:var(--color-bg)}.setting-group .setting-group{background-color:var(--color-white)!important;padding:12px;border-bottom:unset;border:1px solid var(--color-border-secondary);box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808}.setting-group-title{display:flex;align-items:center;justify-content:space-between;cursor:pointer}.setting-group-title h3{font-size:14px;font-weight:700;line-height:24px}.setting-group-arrow{display:flex;transition:transform .3s ease-in-out}.setting-group-arrow.rotated{transform:rotate(180deg)}.setting-group-content{display:flex;flex-direction:column;gap:8px;max-height:500px;opacity:1;transition:max-height .5s ease-in-out,opacity .4s ease-in-out}.setting-group-content.collapsed{max-height:0;opacity:0}.icon-container{display:flex;align-items:center;gap:4px}.input-icon{display:flex;align-items:center;justify-content:center;color:var(--color-text)}.input-label{color:var(--color-text)}.input-container{display:inline-flex;align-items:center;position:relative}.with-suffix{flex:1;padding-right:36px}.input-suffix{position:absolute;right:8px;top:50%;transform:translateY(-50%);color:#666;pointer-events:none;font-size:.9em}.number-setting-wrapper{display:flex;align-items:center;justify-content:space-between}.number-setting-input{width:120px;padding:8px;font-size:14px;border-radius:8px;color:var(--color-input-text);border:1px solid var(--color-border);background:var(--color-bg);box-sizing:border-box}.suffix-wrapper{position:relative;display:inline-flex;align-items:center}.suffix-label{position:absolute;right:8px;padding-left:8px;top:50%;transform:translateY(-50%);border-left:1px solid var(--color-divider);font-size:12px;color:var(--color-text)}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.string-setting-wrapper{display:flex;justify-content:space-between;align-items:center}.string-setting-input{max-width:120px;padding:8px;font-size:14px;border-radius:8px;color:var(--color-input-text);border:1px solid var(--color-border);background:var(--color-bg)}.color-setting-wrapper{display:flex;align-items:center;justify-content:space-between;gap:2px}.color-input-wrapper{position:relative;padding:8px 8px 8px 4px;width:120px;height:33px;display:flex;align-items:center;gap:4px;border:1px solid var(--color-border);border-radius:8px;background-color:var(--color-bg)}.color-text-input{border:none;outline:none;width:65px;color:var(--color-input-text);font-size:14px;text-align:center;background:transparent}.color-picker{position:absolute;left:0;top:0;width:25px;height:25px;opacity:0;cursor:pointer}.color-preview{width:25px;height:25px;border-radius:4px}.select-container{display:flex;align-items:center;gap:4px;justify-content:space-between}.select{width:120px;padding:8px;font-size:14px;border-radius:8px;border:1px solid var(--color-border);background:var(--color-bg);cursor:pointer}.select:focus{outline:none}.align-setting-wrapper{display:flex;align-items:center;justify-content:space-between}.align-setting-label{font-size:12px;color:var(--color-text)}.align-options-container{width:120px;color:#0006;background-color:#f5f6f7;border-radius:9999px;padding:4px 13px;display:flex;gap:8px}.align-option-button{display:flex;align-items:center;justify-content:center;width:26px;height:26px;background:transparent;border:none;cursor:pointer;border-radius:50%;transition:background-color .2s,color .2s}.align-option-button:hover{background-color:#fff}.align-option-button.selected{background-color:var(--color-white);color:var(--color-black)}.button-setting-wrapper{display:flex;justify-content:center}.button-setting{padding:8px 16px;background-color:var(--button-bg, #007bff);color:var(--button-color, #fff);border:none;border-radius:4px;cursor:pointer;font-size:14px}.button-setting:hover{background-color:var(--button-bg-hover, #0056b3)}.dimension-setting-container{display:flex;flex-direction:column;gap:8px;position:relative}.dimension-bracket{width:18px;height:42px;position:absolute;top:16px;right:122px;display:flex;align-items:center;justify-content:center}.dimension-bracket:before{content:"";position:absolute;width:13px;height:14px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15' fill='none'><path d='M14 1H5C2.79086 1 1 2.79086 1 5V15' stroke='%23667085'/></svg>") no-repeat center center;background-size:contain;top:0;right:1px}.dimension-bracket:after{content:"";position:absolute;width:13px;height:14px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15' fill='none'><path d='M14 14H5C2.79086 14 1 12.2091 1 10V4.76837e-07' stroke='%23667085'/></svg>") no-repeat center center;background-size:contain;bottom:0;right:1px}.dimension-lock-icon{width:24px;height:24px;background:none;cursor:pointer;display:inline-flex;align-items:center;color:#667085;z-index:1}.dimension-lock-icon:hover{color:#000}:root{--color-border: #d0d5dd;--color-bg: #f8f8f8;--color-border-secondary: #eaecf0;--color-text: #667085;--color-title: #344054;--color-input-text: #292b2e;--color-white: #fff;--color-black: #000;--color-divider: #dcdcdc}*{padding:0;margin:0;border:none}*,*:before,*:after{box-sizing:border-box}a,a:link,a:visited,a:hover{text-decoration:none}body{font-family:Inter,serif;font-weight:400;font-size:12px;line-height:18px}aside,nav,footer,header,section,main{display:block}h1,h2,h3,h4,h5,h6,p{font-size:inherit;font-weight:inherit}ul,ul li{list-style:none}img{vertical-align:top}img,svg{max-width:100%;height:auto}address{font-style:normal}input,textarea,button,select{font-family:inherit;font-size:inherit;color:inherit;background-color:transparent}input::-ms-clear{display:none}button,input[type=submit]{display:inline-block;box-shadow:none;background-color:transparent;background:none;cursor:pointer}input:focus,input:active,button:focus,button:active{outline:none}button::-moz-focus-inner{padding:0;border:0}label{cursor:pointer}legend{display:block}
1
+ @import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";.setting-group{padding:16px;display:flex;flex-direction:column;gap:8px;border-bottom:solid 1px var(--color-border);border-radius:8px;background-color:var(--color-bg)}.setting-group .setting-group{background-color:var(--color-white)!important;padding:12px;border-bottom:unset;border:1px solid var(--color-border-secondary);box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808}.setting-group-title{display:flex;align-items:center;justify-content:space-between;cursor:pointer}.setting-group-title h3{font-size:14px;font-weight:700;line-height:24px}.setting-group-arrow{display:flex;transition:transform .3s ease-in-out}.setting-group-arrow.rotated{transform:rotate(180deg)}.setting-group-content{flex-direction:column;gap:8px;max-height:fit-content;display:flex;transition:max-height .3s ease-in-out,display .2s ease-in-out}.setting-group-content.collapsed{max-height:0;display:none}.icon-container{display:flex;align-items:center;gap:4px}.input-icon{display:flex;align-items:center;justify-content:center;color:var(--color-text)}.input-label{color:var(--color-text)}.input-container{display:inline-flex;align-items:center;position:relative}.with-suffix{flex:1;padding-right:36px}.input-suffix{position:absolute;right:8px;top:50%;transform:translateY(-50%);color:#666;pointer-events:none;font-size:.9em}.string-setting-wrapper{display:flex;justify-content:space-between;align-items:center}.string-setting-input{max-width:120px;padding:8px;font-size:14px;border-radius:8px;color:var(--color-input-text);border:1px solid var(--color-border);background:var(--color-bg)}.color-setting-wrapper{display:flex;align-items:center;justify-content:space-between;gap:2px}.color-input-wrapper{position:relative;padding:8px 8px 8px 4px;width:120px;height:33px;display:flex;align-items:center;gap:4px;border:1px solid var(--color-border);border-radius:8px;background-color:var(--color-bg)}.color-text-input{border:none;outline:none;width:65px;color:var(--color-input-text);font-size:14px;text-align:center;background:transparent}.color-picker{position:absolute;left:0;top:0;width:25px;height:25px;opacity:0;cursor:pointer}.color-preview{width:25px;height:25px;border-radius:4px}.number-setting-wrapper{display:flex;align-items:center;justify-content:space-between}.number-setting-input{width:120px;padding:8px;font-size:14px;border-radius:8px;color:var(--color-input-text);border:1px solid var(--color-border);background:var(--color-bg);box-sizing:border-box}.suffix-wrapper{position:relative;display:inline-flex;align-items:center}.suffix-label{position:absolute;right:8px;padding-left:8px;top:50%;transform:translateY(-50%);border-left:1px solid var(--color-divider);font-size:12px;color:var(--color-text)}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.select-container{display:flex;align-items:center;gap:4px;justify-content:space-between}.select{width:120px;padding:8px;font-size:14px;border-radius:8px;border:1px solid var(--color-border);background:var(--color-bg);cursor:pointer}.select:focus{outline:none}.align-setting-wrapper{display:flex;align-items:center;justify-content:space-between}.align-setting-label{font-size:12px;color:var(--color-text)}.align-options-container{width:120px;color:#0006;background-color:#f5f6f7;border-radius:9999px;padding:4px 13px;display:flex;gap:8px}.align-option-button{display:flex;align-items:center;justify-content:center;width:26px;height:26px;background:transparent;border:none;cursor:pointer;border-radius:50%;transition:background-color .2s,color .2s}.align-option-button:hover{background-color:#fff}.align-option-button.selected{background-color:var(--color-white);color:var(--color-black)}.button-setting-wrapper{display:flex;justify-content:center}.button-setting{padding:8px 16px;background-color:var(--button-bg, #007bff);color:var(--button-color, #fff);border:none;border-radius:4px;cursor:pointer;font-size:14px}.button-setting:hover{background-color:var(--button-bg-hover, #0056b3)}.dimension-setting-container{display:flex;flex-direction:column;gap:8px;position:relative}.dimension-bracket{width:18px;height:42px;position:absolute;top:16px;right:122px;display:flex;align-items:center;justify-content:center}.dimension-bracket:before{content:"";position:absolute;width:13px;height:14px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15' fill='none'><path d='M14 1H5C2.79086 1 1 2.79086 1 5V15' stroke='%23667085'/></svg>") no-repeat center center;background-size:contain;top:0;right:1px}.dimension-bracket:after{content:"";position:absolute;width:13px;height:14px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15' fill='none'><path d='M14 14H5C2.79086 14 1 12.2091 1 10V4.76837e-07' stroke='%23667085'/></svg>") no-repeat center center;background-size:contain;bottom:0;right:1px}.dimension-lock-icon{width:24px;height:24px;background:none;cursor:pointer;display:inline-flex;align-items:center;color:#667085;z-index:1}.dimension-lock-icon:hover{color:#000}.upload-setting-wrapper{display:flex;align-items:center;justify-content:space-between}.upload-preview{width:91px;height:71px;object-fit:cover;border-radius:4px}.upload-button{display:inline-flex;align-items:center;gap:4px;padding:5px 4px;background-color:var(--color-white);border:1px solid var(--color-border-secondary);border-radius:8px;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}.upload-icon{padding:7px 8px 8px 7px;display:flex;align-items:center;justify-content:center;background-color:var(--color-bg-icon);border-radius:28px}.upload-label{display:inline-block;font-size:12px;font-weight:600;color:var(--color-btn-text);transition:transform .15s ease}.upload-button:hover{transform:scale(1.02);box-shadow:0 2px 6px #0000001a}:root{--color-border: #d0d5dd;--color-bg: #f8f8f8;--color-border-secondary: #eaecf0;--color-text: #667085;--color-title: #344054;--color-input-text: #292b2e;--color-white: #fff;--color-black: #000;--color-divider: #dcdcdc;--color-btn-text: #4b4b4b;--color-bg-icon: #f2f4f7}*{padding:0;margin:0;border:none}*,*:before,*:after{box-sizing:border-box}a,a:link,a:visited,a:hover{text-decoration:none}body{font-family:Inter,serif;font-weight:400;font-size:12px;line-height:18px}aside,nav,footer,header,section,main{display:block}h1,h2,h3,h4,h5,h6,p{font-size:inherit;font-weight:inherit}ul,ul li{list-style:none}img{vertical-align:top}img,svg{max-width:100%;height:auto}address{font-style:normal}input,textarea,button,select{font-family:inherit;font-size:inherit;color:inherit;background-color:transparent}input::-ms-clear{display:none}button,input[type=submit]{display:inline-block;box-shadow:none;background-color:transparent;background:none;cursor:pointer}input:focus,input:active,button:focus,button:active{outline:none}button::-moz-focus-inner{padding:0;border:0}label{cursor:pointer}legend{display:block}
package/dist/index.d.ts CHANGED
@@ -115,12 +115,27 @@ export declare type InputTypes = 'number' | 'text' | 'select' | 'color' | 'date'
115
115
 
116
116
  export declare function iterateSettings<T extends Record<string, Setting<any, any> | SettingGroup<any>>>(settings: T, callback: (key: string, setting: Setting<any, any> | SettingGroup<any>) => void): void;
117
117
 
118
+ declare class MarginNumberSetting extends Setting<number | 'auto' | undefined, MarginNumberSettingsProps> {
119
+ inputType: InputTypes;
120
+ constructor(props: MarginNumberSettingsProps);
121
+ draw(): HTMLElement;
122
+ }
123
+
124
+ declare interface MarginNumberSettingsProps extends SettingProps<number | 'auto'> {
125
+ minValue?: number;
126
+ maxValue?: number;
127
+ className?: string;
128
+ inputClassName?: string;
129
+ wrapperClassName?: string;
130
+ suffix?: NumberSuffix;
131
+ default: number | 'auto';
132
+ }
133
+
118
134
  export declare class MarginSettingGroup extends SettingGroup<{
119
- margin: NumberSetting;
120
- marginTop: NumberSetting;
121
- marginRight: NumberSetting;
122
- marginBottom: NumberSetting;
123
- marginLeft: NumberSetting;
135
+ marginTop: MarginNumberSetting;
136
+ marginRight: MarginNumberSetting;
137
+ marginBottom: MarginNumberSetting;
138
+ marginLeft: MarginNumberSetting;
124
139
  }> {
125
140
  constructor();
126
141
  getCssCode(): string;
@@ -188,7 +203,7 @@ export declare abstract class Setting<T, P extends SettingProps<T>> implements I
188
203
  abstract inputType: T extends Primitive ? InputTypes : Record<keyof T, InputTypes>;
189
204
  onChange: ((value: T) => void) | undefined;
190
205
  constructor(props?: P);
191
- setOnChange(onChange: (value: T) => void): void;
206
+ setOnChange(onChange: (value: T) => void): Setting<T, P>;
192
207
  setValue(newValue: T): void;
193
208
  abstract draw(): HTMLElement;
194
209
  createInput(props: InputProps): HTMLElement;
@@ -201,8 +216,13 @@ export declare class SettingGroup<T extends Record<string, Setting<any, any> | S
201
216
  settings: T;
202
217
  id: string;
203
218
  onChange?: ((value: T) => void) | undefined;
204
- setOnChange(onChange: (value: T) => void): void;
205
219
  constructor(groupProps: SettingGroupProps<T>);
220
+ setOnChange(onChange: (value: T) => void): SettingGroup<T>;
221
+ /**
222
+ * Returns all values if called with no arguments,
223
+ * or returns only the values for a single child if a key is provided.
224
+ */
225
+ getValues<K extends keyof T>(childKey?: K): any;
206
226
  draw(): HTMLElement;
207
227
  }
208
228
 
@@ -235,4 +255,20 @@ export declare interface StringSettingsProps extends SettingProps<string> {
235
255
  wrapperClassName?: string;
236
256
  }
237
257
 
258
+ /**
259
+ * A Setting subclass that displays an image preview (if any)
260
+ * and an "Upload" button with an icon. The user can select a file,
261
+ * which updates this.value with a data URL of the image.
262
+ */
263
+ export declare class UploadSetting extends Setting<string, UploadSettingProps> {
264
+ inputType: InputTypes;
265
+ constructor(props?: UploadSettingProps);
266
+ draw(): HTMLElement;
267
+ }
268
+
269
+ export declare interface UploadSettingProps extends SettingProps<string> {
270
+ /** Optional placeholder image or default URL */
271
+ defaultUrl?: string;
272
+ }
273
+
238
274
  export { }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "builder-settings-types",
3
3
  "description": "builder settings",
4
- "version": "0.0.51",
4
+ "version": "0.0.53",
5
5
  "type": "module",
6
6
  "main": "dist/builder-settings-types.cjs.js",
7
7
  "module": "dist/builder-settings-types.es.js",