builder-settings-types 0.0.47 → 0.0.49
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/builder-settings-types.cjs.js +33 -4
- package/dist/builder-settings-types.es.js +246 -96
- package/dist/index.css +1 -1
- package/dist/index.d.ts +87 -0
- package/package.json +2 -1
|
@@ -1,15 +1,44 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function f(
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const k="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";let w=(o=21)=>{let t="",e=crypto.getRandomValues(new Uint8Array(o|=0));for(;o--;)t+=k[e[o]&63];return t};function f(o,t){for(const e in o)if(o.hasOwnProperty(e)){const n=o[e];t(e,n)}}class x{setOnChange(t){this.onChange=t,f(this.settings,(e,n)=>{n.setOnChange(t)})}constructor(t){this.id=t.id||w(),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=`
|
|
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
|
|
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 N(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 d{constructor(t={}){this.props=t,this.id=t.id||w(),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||N(t.inputType)),s.type=t.inputType,s.placeholder=t.placeholder||"",s.className=t.inputClassName||"",s.oninput=i=>{const a=i.target;let l=a.value;t.inputType==="number"?l=Number(a.value):(t.inputType==="color"||t.inputType==="date")&&(l=a.value),this.value=l,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 p extends d{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,l=this.props.maxValue??Number.MAX_SAFE_INTEGER;let r=Number(i.value);r<a&&(r=a),r>l&&(r=l),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 L extends x{constructor(){super({title:"Margin",settings:{margin:new p({title:"Margin All"}),marginTop:new p({title:"Margin Top"}),marginRight:new p({title:"Margin Right"}),marginBottom:new p({title:"Margin Bottom"}),marginLeft:new p({title:"Margin Left"})}})}getCssCode(){return`
|
|
6
6
|
margin-botton: ${this.settings.marginBottom.value}px;
|
|
7
7
|
margin-top: ${this.settings.marginTop.value}px;
|
|
8
8
|
margin-right: ${this.settings.marginRight.value}px;
|
|
9
9
|
margin-left: ${this.settings.marginLeft.value}px;
|
|
10
|
-
`}}class
|
|
10
|
+
`}}class b extends d{constructor(t){super(t),this.inputType="color",this.icon="<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>"}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.icon),s=this.createLabel("Color");e.appendChild(n),e.appendChild(s);const i=document.createElement("div");i.className="color-input-wrapper";let a,l;const r=/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/,g=u=>r.test(u.value)?(u.style.border="",!0):(u.style.border="1px solid red",!1);a=this.createInput({value:this.value,inputType:"text",inputClassName:"color-text-input",inputCustomizer:u=>{u.oninput=v=>{var C;let h=v.target.value.trim();if(!g(u))return;this.value=h,(C=this.onChange)==null||C.call(this,h);const m=document.getElementsByClassName("color-picker")[0];m.value=h,c.style.backgroundColor=h}}}),l=this.createInput({value:this.value,inputType:this.inputType,inputClassName:"color-picker",inputCustomizer:u=>{u.oninput=v=>{var C;let h=v.target.value;this.value=h,(C=this.onChange)==null||C.call(this,h);const m=document.getElementsByClassName("color-text-input")[0];m.value=h,c.style.backgroundColor=h,g(m)}}});const c=document.createElement("div");return c.className="color-preview",c.style.backgroundColor=this.value||"",i.appendChild(c),i.appendChild(l),i.appendChild(a),t.appendChild(e),t.appendChild(i),t}}class E 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})}}class S extends p{constructor(t){super({...t,minValue:0,maxValue:100,icon:M,title:t.title||"Opacity"}),this.inputType="number"}}const M=`
|
|
11
11
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
12
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
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
14
|
</svg>
|
|
15
|
-
`;class
|
|
15
|
+
`;class y 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(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 l,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=g=>{var c;this.value=g.target.value,(c=this.onChange)==null||c.call(this,g.target.value)},[...this.props.options||[],...((r=(l=this.props).getOptions)==null?void 0:r.call(l))||[]].forEach(g=>{const c=this.createOption(g);i.appendChild(c)}),this.value&&(i.value=this.value),e.appendChild(n),e.appendChild(s),t.appendChild(e),t.appendChild(i),t}}class T 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 n=document.createElement("div");return n.className="align-options-container",[{name:"left",icon:`
|
|
16
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
|
|
17
|
+
<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
|
+
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
19
|
+
<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"
|
|
20
|
+
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
21
|
+
</svg>
|
|
22
|
+
`},{name:"center",icon:`
|
|
23
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
|
|
24
|
+
<path d="M12 7.5C12.6989 7.5 13.0484 7.5 13.324 7.38582C13.6916 7.23358 13.9836 6.94157 14.1358 6.57402C14.25 6.29837 14.25 5.94891 14.25 5.25C14.25 4.55109 14.25 4.20163 14.1358 3.92598C13.9836 3.55843 13.6916 3.26642 13.324 3.11418C13.0484 3 12.6989 3 12 3L6 3C5.30109 3 4.95163 3 4.67598 3.11418C4.30843 3.26642 4.01642 3.55843 3.86418 3.92597C3.75 4.20163 3.75 4.55109 3.75 5.25C3.75 5.94891 3.75 6.29837 3.86418 6.57402C4.01642 6.94157 4.30843 7.23358 4.67598 7.38582C4.95163 7.5 5.30109 7.5 6 7.5L12 7.5Z"
|
|
25
|
+
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
26
|
+
<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"
|
|
27
|
+
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
28
|
+
</svg>
|
|
29
|
+
`},{name:"right",icon:`
|
|
30
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
|
|
31
|
+
<path d="M13.5 7.5C14.1989 7.5 14.5484 7.5 14.824 7.38582C15.1916 7.23358 15.4836 6.94157 15.6358 6.57402C15.75 6.29837 15.75 5.94891 15.75 5.25C15.75 4.55109 15.75 4.20163 15.6358 3.92598C15.4836 3.55843 15.1916 3.26642 14.824 3.11418C14.5484 3 14.1989 3 13.5 3L7.5 3C6.80109 3 6.45163 3 6.17598 3.11418C5.80843 3.26642 5.51642 3.55843 5.36418 3.92597C5.25 4.20163 5.25 4.55109 5.25 5.25C5.25 5.94891 5.25 6.29837 5.36418 6.57402C5.51642 6.94157 5.80843 7.23358 6.17598 7.38582C6.45163 7.5 6.80109 7.5 7.5 7.5L13.5 7.5Z"
|
|
32
|
+
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
33
|
+
<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
|
+
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
35
|
+
</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 l;n.querySelectorAll(".align-option-button").forEach(r=>r.classList.remove("selected")),a.classList.add("selected"),this.value=i.name,(l=this.onChange)==null||l.call(this,this.value)}),n.appendChild(a)}),t.appendChild(n),t}}class V 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 I 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 p({title:"Width",default:this.value.width,suffix:"px",minValue:t.minWidth??1,maxValue:t.maxWidth,icon:H}),this.heightSetting=new p({title:"Height",default:this.value.height,suffix:"px",minValue:t.minHeight??1,maxValue:t.maxHeight,icon:O}),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`
|
|
37
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none">
|
|
38
|
+
<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
|
+
</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 H=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
41
|
+
<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>`,O=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
43
|
+
<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=T;exports.ButtonSetting=V;exports.ColorSetting=b;exports.DimensionSetting=I;exports.MarginSettingGroup=L;exports.NumberSetting=p;exports.OpacitySetting=S;exports.SelectSetting=y;exports.Setting=d;exports.SettingGroup=x;exports.StringSetting=E;exports.iterateSettings=f;
|
|
@@ -1,45 +1,52 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
const f = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
|
|
2
|
+
let w = (o = 21) => {
|
|
3
|
+
let t = "", e = crypto.getRandomValues(new Uint8Array(o |= 0));
|
|
4
|
+
for (; o--; )
|
|
5
|
+
t += f[e[o] & 63];
|
|
6
|
+
return t;
|
|
7
|
+
};
|
|
8
|
+
function x(o, t) {
|
|
9
|
+
for (const e in o)
|
|
10
|
+
if (o.hasOwnProperty(e)) {
|
|
11
|
+
const n = o[e];
|
|
12
|
+
t(e, n);
|
|
6
13
|
}
|
|
7
14
|
}
|
|
8
|
-
class
|
|
15
|
+
class k {
|
|
9
16
|
setOnChange(t) {
|
|
10
|
-
this.onChange = t,
|
|
11
|
-
|
|
17
|
+
this.onChange = t, x(this.settings, (e, n) => {
|
|
18
|
+
n.setOnChange(t);
|
|
12
19
|
});
|
|
13
20
|
}
|
|
14
21
|
constructor(t) {
|
|
15
|
-
this.title = t.title, this.settings = t.settings, Object.assign(this, t.settings);
|
|
22
|
+
this.id = t.id || w(), this.title = t.title, this.settings = t.settings, Object.assign(this, t.settings);
|
|
16
23
|
}
|
|
17
24
|
draw() {
|
|
18
25
|
const t = document.createElement("div");
|
|
19
26
|
t.className = "setting-group";
|
|
20
27
|
const e = document.createElement("div");
|
|
21
28
|
e.className = "setting-group-title";
|
|
22
|
-
const
|
|
23
|
-
|
|
29
|
+
const n = document.createElement("h3");
|
|
30
|
+
n.textContent = this.title;
|
|
24
31
|
const s = document.createElement("span");
|
|
25
32
|
s.className = "setting-group-arrow", s.innerHTML = `
|
|
26
33
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
27
34
|
<path d="M5 7.5L10 12.5L15 7.5" stroke="#344054" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
|
|
28
35
|
</svg>
|
|
29
36
|
`;
|
|
30
|
-
const
|
|
31
|
-
|
|
37
|
+
const i = document.createElement("div");
|
|
38
|
+
i.className = "setting-group-content";
|
|
32
39
|
for (const a in this.settings) {
|
|
33
|
-
const
|
|
34
|
-
|
|
40
|
+
const r = this.settings[a].draw();
|
|
41
|
+
i.appendChild(r);
|
|
35
42
|
}
|
|
36
43
|
return e.onclick = () => {
|
|
37
|
-
|
|
38
|
-
}, e.appendChild(
|
|
44
|
+
i.classList.toggle("collapsed"), s.classList.toggle("rotated");
|
|
45
|
+
}, e.appendChild(n), e.appendChild(s), t.appendChild(e), t.appendChild(i), t;
|
|
39
46
|
}
|
|
40
47
|
}
|
|
41
|
-
function
|
|
42
|
-
switch (
|
|
48
|
+
function N(o) {
|
|
49
|
+
switch (o) {
|
|
43
50
|
case "number":
|
|
44
51
|
return 0;
|
|
45
52
|
case "text":
|
|
@@ -58,7 +65,7 @@ function x(r) {
|
|
|
58
65
|
}
|
|
59
66
|
class C {
|
|
60
67
|
constructor(t = {}) {
|
|
61
|
-
this.props = t, this.value = this.props.default, this.title = t.title || "";
|
|
68
|
+
this.props = t, this.id = t.id || w(), this.value = this.props.default, this.title = t.title || "";
|
|
62
69
|
}
|
|
63
70
|
setOnChange(t) {
|
|
64
71
|
this.onChange = t;
|
|
@@ -70,45 +77,45 @@ class C {
|
|
|
70
77
|
t = { ...this.props.inputProps, ...t };
|
|
71
78
|
const e = document.createElement("div");
|
|
72
79
|
if (e.className = t.wrapperClassName || "", t.title || t.icon) {
|
|
73
|
-
const
|
|
74
|
-
if (
|
|
80
|
+
const i = document.createElement("div");
|
|
81
|
+
if (i.className = "icon-container", t.icon) {
|
|
75
82
|
const a = this.createIcon(t.icon, t.iconClassName);
|
|
76
|
-
|
|
83
|
+
i.appendChild(a);
|
|
77
84
|
}
|
|
78
85
|
if (t.title) {
|
|
79
86
|
const a = this.createLabel(t.title, t.labelClassName);
|
|
80
|
-
|
|
87
|
+
i.appendChild(a);
|
|
81
88
|
}
|
|
82
|
-
e.appendChild(
|
|
89
|
+
e.appendChild(i);
|
|
83
90
|
}
|
|
84
|
-
const
|
|
85
|
-
|
|
91
|
+
const n = document.createElement("div");
|
|
92
|
+
n.className = t.wrapperClassName || "";
|
|
86
93
|
const s = document.createElement("input");
|
|
87
|
-
return this.inputEl = s, s.value = String(t.value ||
|
|
88
|
-
const a =
|
|
89
|
-
let
|
|
90
|
-
t.inputType === "number" ?
|
|
91
|
-
}, t.inputCustomizer && t.inputCustomizer(s),
|
|
94
|
+
return this.inputEl = s, s.value = String(t.value || N(t.inputType)), s.type = t.inputType, s.placeholder = t.placeholder || "", s.className = t.inputClassName || "", s.oninput = (i) => {
|
|
95
|
+
const a = i.target;
|
|
96
|
+
let l = a.value;
|
|
97
|
+
t.inputType === "number" ? l = Number(a.value) : (t.inputType === "color" || t.inputType === "date") && (l = a.value), this.value = l, this.onChange && this.onChange(this.value);
|
|
98
|
+
}, t.inputCustomizer && t.inputCustomizer(s), n.appendChild(s), e.appendChild(n), e;
|
|
92
99
|
}
|
|
93
100
|
createLabel(t, e) {
|
|
94
|
-
const
|
|
95
|
-
return
|
|
101
|
+
const n = document.createElement("span");
|
|
102
|
+
return n.textContent = t, n.className = "input-label " + (e || ""), n;
|
|
96
103
|
}
|
|
97
104
|
createIcon(t, e) {
|
|
98
|
-
const
|
|
99
|
-
return
|
|
105
|
+
const n = document.createElement("span");
|
|
106
|
+
return n.className = "input-icon " + (e || ""), n.innerHTML = t, n;
|
|
100
107
|
}
|
|
101
108
|
}
|
|
102
|
-
class
|
|
109
|
+
class u extends C {
|
|
103
110
|
constructor(t = {}) {
|
|
104
111
|
super(t), this.inputType = "number";
|
|
105
112
|
}
|
|
106
113
|
draw() {
|
|
107
|
-
const t = (
|
|
108
|
-
this.props.minValue !== void 0 && (
|
|
109
|
-
const a = this.props.minValue ?? Number.MIN_SAFE_INTEGER,
|
|
110
|
-
let
|
|
111
|
-
|
|
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, l = this.props.maxValue ?? Number.MAX_SAFE_INTEGER;
|
|
117
|
+
let r = Number(i.value);
|
|
118
|
+
r < a && (r = a), r > l && (r = l), i.value = String(r);
|
|
112
119
|
});
|
|
113
120
|
}, e = this.createInput({
|
|
114
121
|
value: this.value,
|
|
@@ -122,24 +129,24 @@ class d extends C {
|
|
|
122
129
|
if (!this.props.suffix || this.props.suffix === "none")
|
|
123
130
|
return e;
|
|
124
131
|
e.classList.add("suffix-wrapper");
|
|
125
|
-
const
|
|
132
|
+
const n = e.querySelector(
|
|
126
133
|
"input.number-setting-input"
|
|
127
134
|
);
|
|
128
|
-
|
|
135
|
+
n && (n.style.paddingRight = "35px");
|
|
129
136
|
const s = document.createElement("span");
|
|
130
137
|
return s.className = "suffix-label", s.textContent = this.props.suffix, e.appendChild(s), e;
|
|
131
138
|
}
|
|
132
139
|
}
|
|
133
|
-
class
|
|
140
|
+
class M extends k {
|
|
134
141
|
constructor() {
|
|
135
142
|
super({
|
|
136
143
|
title: "Margin",
|
|
137
144
|
settings: {
|
|
138
|
-
margin: new
|
|
139
|
-
marginTop: new
|
|
140
|
-
marginRight: new
|
|
141
|
-
marginBottom: new
|
|
142
|
-
marginLeft: new
|
|
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" })
|
|
143
150
|
}
|
|
144
151
|
});
|
|
145
152
|
}
|
|
@@ -162,49 +169,49 @@ class y extends C {
|
|
|
162
169
|
t.className = "color-setting-wrapper";
|
|
163
170
|
const e = document.createElement("div");
|
|
164
171
|
e.className = "icon-container";
|
|
165
|
-
const
|
|
166
|
-
e.appendChild(
|
|
167
|
-
const
|
|
168
|
-
|
|
169
|
-
let a,
|
|
170
|
-
const
|
|
172
|
+
const n = this.createIcon(this.icon), s = this.createLabel("Color");
|
|
173
|
+
e.appendChild(n), e.appendChild(s);
|
|
174
|
+
const i = document.createElement("div");
|
|
175
|
+
i.className = "color-input-wrapper";
|
|
176
|
+
let a, l;
|
|
177
|
+
const r = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/, d = (p) => r.test(p.value) ? (p.style.border = "", !0) : (p.style.border = "1px solid red", !1);
|
|
171
178
|
a = this.createInput({
|
|
172
179
|
value: this.value,
|
|
173
180
|
inputType: "text",
|
|
174
181
|
inputClassName: "color-text-input",
|
|
175
|
-
inputCustomizer: (
|
|
176
|
-
|
|
177
|
-
var
|
|
178
|
-
let
|
|
179
|
-
if (!
|
|
180
|
-
this.value =
|
|
181
|
-
const
|
|
182
|
+
inputCustomizer: (p) => {
|
|
183
|
+
p.oninput = (v) => {
|
|
184
|
+
var g;
|
|
185
|
+
let h = v.target.value.trim();
|
|
186
|
+
if (!d(p)) return;
|
|
187
|
+
this.value = h, (g = this.onChange) == null || g.call(this, h);
|
|
188
|
+
const m = document.getElementsByClassName(
|
|
182
189
|
"color-picker"
|
|
183
190
|
)[0];
|
|
184
|
-
|
|
191
|
+
m.value = h, c.style.backgroundColor = h;
|
|
185
192
|
};
|
|
186
193
|
}
|
|
187
|
-
}),
|
|
194
|
+
}), l = this.createInput({
|
|
188
195
|
value: this.value,
|
|
189
196
|
inputType: this.inputType,
|
|
190
197
|
inputClassName: "color-picker",
|
|
191
|
-
inputCustomizer: (
|
|
192
|
-
|
|
193
|
-
var
|
|
194
|
-
let
|
|
195
|
-
this.value =
|
|
196
|
-
const
|
|
198
|
+
inputCustomizer: (p) => {
|
|
199
|
+
p.oninput = (v) => {
|
|
200
|
+
var g;
|
|
201
|
+
let h = v.target.value;
|
|
202
|
+
this.value = h, (g = this.onChange) == null || g.call(this, h);
|
|
203
|
+
const m = document.getElementsByClassName(
|
|
197
204
|
"color-text-input"
|
|
198
205
|
)[0];
|
|
199
|
-
|
|
206
|
+
m.value = h, c.style.backgroundColor = h, d(m);
|
|
200
207
|
};
|
|
201
208
|
}
|
|
202
209
|
});
|
|
203
210
|
const c = document.createElement("div");
|
|
204
|
-
return c.className = "color-preview", c.style.backgroundColor = this.value || "",
|
|
211
|
+
return c.className = "color-preview", c.style.backgroundColor = this.value || "", i.appendChild(c), i.appendChild(l), i.appendChild(a), t.appendChild(e), t.appendChild(i), t;
|
|
205
212
|
}
|
|
206
213
|
}
|
|
207
|
-
class
|
|
214
|
+
class S extends C {
|
|
208
215
|
constructor(t = {}) {
|
|
209
216
|
super(t), this.inputType = "text";
|
|
210
217
|
}
|
|
@@ -224,29 +231,29 @@ class b extends C {
|
|
|
224
231
|
});
|
|
225
232
|
}
|
|
226
233
|
}
|
|
227
|
-
class
|
|
234
|
+
class T extends u {
|
|
228
235
|
constructor(t) {
|
|
229
236
|
super({
|
|
230
237
|
...t,
|
|
231
238
|
minValue: 0,
|
|
232
239
|
maxValue: 100,
|
|
233
|
-
icon:
|
|
240
|
+
icon: L,
|
|
234
241
|
title: t.title || "Opacity"
|
|
235
242
|
}), this.inputType = "number";
|
|
236
243
|
}
|
|
237
244
|
}
|
|
238
|
-
const
|
|
245
|
+
const L = `
|
|
239
246
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
240
247
|
<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"/>
|
|
241
248
|
<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"/>
|
|
242
249
|
</svg>
|
|
243
250
|
`;
|
|
244
|
-
class
|
|
251
|
+
class V extends C {
|
|
245
252
|
constructor(t = {}) {
|
|
246
253
|
super(t), this.inputType = "select", this.props.options || (this.props.options = []), this.props.getOptionsAsync && this.props.getOptionsAsync().then((e) => {
|
|
247
|
-
this.props.options = [...this.props.options, ...e], e.forEach((
|
|
254
|
+
this.props.options = [...this.props.options, ...e], e.forEach((n) => {
|
|
248
255
|
var s;
|
|
249
|
-
(s = this.selectNode) == null || s.appendChild(this.createOption(
|
|
256
|
+
(s = this.selectNode) == null || s.appendChild(this.createOption(n));
|
|
250
257
|
});
|
|
251
258
|
}).catch((e) => {
|
|
252
259
|
console.error("Failed to fetch async options:", e);
|
|
@@ -257,32 +264,175 @@ class T extends C {
|
|
|
257
264
|
return e.value = t.value, e.textContent = t.name, e;
|
|
258
265
|
}
|
|
259
266
|
draw() {
|
|
260
|
-
var
|
|
267
|
+
var l, r;
|
|
261
268
|
const t = document.createElement("div");
|
|
262
269
|
t.classList.add("select-container");
|
|
263
270
|
const e = document.createElement("div");
|
|
264
271
|
e.className = "icon-container";
|
|
265
|
-
const
|
|
266
|
-
return this.selectNode =
|
|
272
|
+
const n = this.createIcon(this.props.icon || ""), s = this.createLabel(this.props.title || ""), i = document.createElement("select");
|
|
273
|
+
return this.selectNode = i, i.classList.add("select"), i.onchange = (d) => {
|
|
267
274
|
var c;
|
|
268
|
-
this.value =
|
|
275
|
+
this.value = d.target.value, (c = this.onChange) == null || c.call(this, d.target.value);
|
|
269
276
|
}, [
|
|
270
277
|
...this.props.options || [],
|
|
271
|
-
...((
|
|
272
|
-
].forEach((
|
|
273
|
-
const c = this.createOption(
|
|
274
|
-
|
|
275
|
-
}), this.value && (
|
|
278
|
+
...((r = (l = this.props).getOptions) == null ? void 0 : r.call(l)) || []
|
|
279
|
+
].forEach((d) => {
|
|
280
|
+
const c = this.createOption(d);
|
|
281
|
+
i.appendChild(c);
|
|
282
|
+
}), this.value && (i.value = this.value), e.appendChild(n), e.appendChild(s), t.appendChild(e), t.appendChild(i), t;
|
|
283
|
+
}
|
|
284
|
+
}
|
|
285
|
+
class I extends C {
|
|
286
|
+
constructor(t = {}) {
|
|
287
|
+
super(t), this.inputType = "button", this.value || (this.value = "center");
|
|
288
|
+
}
|
|
289
|
+
draw() {
|
|
290
|
+
const t = document.createElement("div");
|
|
291
|
+
t.className = "align-setting-wrapper";
|
|
292
|
+
const e = document.createElement("label");
|
|
293
|
+
e.className = "align-setting-label", e.textContent = this.title || "Align", t.appendChild(e);
|
|
294
|
+
const n = document.createElement("div");
|
|
295
|
+
return n.className = "align-options-container", [
|
|
296
|
+
{
|
|
297
|
+
name: "left",
|
|
298
|
+
icon: `
|
|
299
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
|
|
300
|
+
<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"
|
|
301
|
+
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
302
|
+
<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"
|
|
303
|
+
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
304
|
+
</svg>
|
|
305
|
+
`
|
|
306
|
+
},
|
|
307
|
+
{
|
|
308
|
+
name: "center",
|
|
309
|
+
icon: `
|
|
310
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
|
|
311
|
+
<path d="M12 7.5C12.6989 7.5 13.0484 7.5 13.324 7.38582C13.6916 7.23358 13.9836 6.94157 14.1358 6.57402C14.25 6.29837 14.25 5.94891 14.25 5.25C14.25 4.55109 14.25 4.20163 14.1358 3.92598C13.9836 3.55843 13.6916 3.26642 13.324 3.11418C13.0484 3 12.6989 3 12 3L6 3C5.30109 3 4.95163 3 4.67598 3.11418C4.30843 3.26642 4.01642 3.55843 3.86418 3.92597C3.75 4.20163 3.75 4.55109 3.75 5.25C3.75 5.94891 3.75 6.29837 3.86418 6.57402C4.01642 6.94157 4.30843 7.23358 4.67598 7.38582C4.95163 7.5 5.30109 7.5 6 7.5L12 7.5Z"
|
|
312
|
+
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
313
|
+
<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"
|
|
314
|
+
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
315
|
+
</svg>
|
|
316
|
+
`
|
|
317
|
+
},
|
|
318
|
+
{
|
|
319
|
+
name: "right",
|
|
320
|
+
icon: `
|
|
321
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
|
|
322
|
+
<path d="M13.5 7.5C14.1989 7.5 14.5484 7.5 14.824 7.38582C15.1916 7.23358 15.4836 6.94157 15.6358 6.57402C15.75 6.29837 15.75 5.94891 15.75 5.25C15.75 4.55109 15.75 4.20163 15.6358 3.92598C15.4836 3.55843 15.1916 3.26642 14.824 3.11418C14.5484 3 14.1989 3 13.5 3L7.5 3C6.80109 3 6.45163 3 6.17598 3.11418C5.80843 3.26642 5.51642 3.55843 5.36418 3.92597C5.25 4.20163 5.25 4.55109 5.25 5.25C5.25 5.94891 5.25 6.29837 5.36418 6.57402C5.51642 6.94157 5.80843 7.23358 6.17598 7.38582C6.45163 7.5 6.80109 7.5 7.5 7.5L13.5 7.5Z"
|
|
323
|
+
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
324
|
+
<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"
|
|
325
|
+
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
326
|
+
</svg>
|
|
327
|
+
`
|
|
328
|
+
}
|
|
329
|
+
].forEach((i) => {
|
|
330
|
+
const a = document.createElement("button");
|
|
331
|
+
a.className = "align-option-button", a.innerHTML = i.icon, this.value === i.name && a.classList.add("selected"), a.addEventListener("click", () => {
|
|
332
|
+
var l;
|
|
333
|
+
n.querySelectorAll(".align-option-button").forEach((r) => r.classList.remove("selected")), a.classList.add("selected"), this.value = i.name, (l = this.onChange) == null || l.call(this, this.value);
|
|
334
|
+
}), n.appendChild(a);
|
|
335
|
+
}), t.appendChild(n), t;
|
|
336
|
+
}
|
|
337
|
+
}
|
|
338
|
+
class H extends C {
|
|
339
|
+
constructor(t) {
|
|
340
|
+
super(t), this.inputType = "button";
|
|
341
|
+
}
|
|
342
|
+
draw() {
|
|
343
|
+
const t = document.createElement("button");
|
|
344
|
+
t.className = "button-setting " + (this.props.className || ""), t.textContent = this.props.label, t.addEventListener("click", () => {
|
|
345
|
+
this.props.onClick && this.props.onClick();
|
|
346
|
+
});
|
|
347
|
+
const e = document.createElement("div");
|
|
348
|
+
return e.className = "button-setting-wrapper " + (this.props.wrapperClassName || ""), e.appendChild(t), e;
|
|
349
|
+
}
|
|
350
|
+
}
|
|
351
|
+
class R extends C {
|
|
352
|
+
constructor(t = {}) {
|
|
353
|
+
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({
|
|
354
|
+
title: "Width",
|
|
355
|
+
default: this.value.width,
|
|
356
|
+
suffix: "px",
|
|
357
|
+
// Display "px" as the unit.
|
|
358
|
+
minValue: t.minWidth ?? 1,
|
|
359
|
+
maxValue: t.maxWidth,
|
|
360
|
+
icon: E
|
|
361
|
+
// SVG icon defined at the bottom.
|
|
362
|
+
}), this.heightSetting = new u({
|
|
363
|
+
title: "Height",
|
|
364
|
+
default: this.value.height,
|
|
365
|
+
suffix: "px",
|
|
366
|
+
minValue: t.minHeight ?? 1,
|
|
367
|
+
maxValue: t.maxHeight,
|
|
368
|
+
icon: b
|
|
369
|
+
}), this.widthSetting.setOnChange((e) => {
|
|
370
|
+
var i;
|
|
371
|
+
if (this.isUpdating || isNaN(e) || e < 1) return;
|
|
372
|
+
this.isUpdating = !0;
|
|
373
|
+
let n = e, s = this.value.height;
|
|
374
|
+
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;
|
|
375
|
+
}), this.heightSetting.setOnChange((e) => {
|
|
376
|
+
var i;
|
|
377
|
+
if (this.isUpdating || isNaN(e) || e < 1) return;
|
|
378
|
+
this.isUpdating = !0;
|
|
379
|
+
let n = e, s = this.value.width;
|
|
380
|
+
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;
|
|
381
|
+
});
|
|
382
|
+
}
|
|
383
|
+
/**
|
|
384
|
+
* Toggles the locked state. When locking, it recalculates the aspect ratio
|
|
385
|
+
* based on the current width and height. Updates the lock icon accordingly.
|
|
386
|
+
* @param lockIcon The HTMLElement containing the lock icon SVG.
|
|
387
|
+
*/
|
|
388
|
+
toggleLock(t) {
|
|
389
|
+
if (this.locked = !this.locked, this.locked) {
|
|
390
|
+
const e = this.value.width, n = this.value.height;
|
|
391
|
+
n !== 0 && (this.aspectRatio = e / n);
|
|
392
|
+
}
|
|
393
|
+
t.innerHTML = this.getLockSVG(this.locked);
|
|
394
|
+
}
|
|
395
|
+
/**
|
|
396
|
+
* Returns the appropriate SVG string for the lock icon based on lock state.
|
|
397
|
+
* @param isLocked Whether the dimension is currently locked.
|
|
398
|
+
*/
|
|
399
|
+
getLockSVG(t) {
|
|
400
|
+
return `
|
|
401
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none">
|
|
402
|
+
<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"/>
|
|
403
|
+
</svg>
|
|
404
|
+
`;
|
|
405
|
+
}
|
|
406
|
+
/**
|
|
407
|
+
* Renders the DimensionSetting component.
|
|
408
|
+
* It arranges the width and height NumberSettings with a bracket containing a lock icon.
|
|
409
|
+
* @returns {HTMLElement} The container element with the complete dimension control.
|
|
410
|
+
*/
|
|
411
|
+
draw() {
|
|
412
|
+
const t = document.createElement("div");
|
|
413
|
+
t.className = "dimension-setting-container";
|
|
414
|
+
const e = this.widthSetting.draw(), n = this.heightSetting.draw(), s = document.createElement("div");
|
|
415
|
+
s.className = "dimension-bracket";
|
|
416
|
+
const i = document.createElement("span");
|
|
417
|
+
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;
|
|
276
418
|
}
|
|
277
419
|
}
|
|
420
|
+
const E = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
421
|
+
<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"/>
|
|
422
|
+
</svg>`, b = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
423
|
+
<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"/>
|
|
424
|
+
</svg>`;
|
|
278
425
|
export {
|
|
426
|
+
I as AlignSetting,
|
|
427
|
+
H as ButtonSetting,
|
|
279
428
|
y as ColorSetting,
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
T as
|
|
429
|
+
R as DimensionSetting,
|
|
430
|
+
M as MarginSettingGroup,
|
|
431
|
+
u as NumberSetting,
|
|
432
|
+
T as OpacitySetting,
|
|
433
|
+
V as SelectSetting,
|
|
284
434
|
C as Setting,
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
435
|
+
k as SettingGroup,
|
|
436
|
+
S as StringSetting,
|
|
437
|
+
x as iterateSettings
|
|
288
438
|
};
|
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}.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}.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)}.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}: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{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}.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}.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)}.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}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,28 @@
|
|
|
1
|
+
declare class AlignSetting_2 extends Setting<AlignValue, AlignSettingProps> {
|
|
2
|
+
inputType: InputTypes;
|
|
3
|
+
constructor(props?: AlignSettingProps);
|
|
4
|
+
draw(): HTMLElement;
|
|
5
|
+
}
|
|
6
|
+
export { AlignSetting_2 as AlignSetting }
|
|
7
|
+
|
|
8
|
+
export declare interface AlignSettingProps extends SettingProps<AlignValue> {
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
export declare type AlignValue = 'left' | 'center' | 'right';
|
|
12
|
+
|
|
13
|
+
export declare class ButtonSetting extends Setting<void, ButtonSettingProps> {
|
|
14
|
+
inputType: InputTypes;
|
|
15
|
+
constructor(props: ButtonSettingProps);
|
|
16
|
+
draw(): HTMLElement;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
export declare interface ButtonSettingProps extends SettingProps<void> {
|
|
20
|
+
label: string;
|
|
21
|
+
onClick?: () => void;
|
|
22
|
+
className?: string;
|
|
23
|
+
wrapperClassName?: string;
|
|
24
|
+
}
|
|
25
|
+
|
|
1
26
|
export declare class ColorSetting extends Setting<string, ColorSettingProps> {
|
|
2
27
|
inputType: InputTypes;
|
|
3
28
|
constructor(props: ColorSettingProps);
|
|
@@ -8,6 +33,64 @@ export declare class ColorSetting extends Setting<string, ColorSettingProps> {
|
|
|
8
33
|
export declare interface ColorSettingProps extends SettingProps<string> {
|
|
9
34
|
}
|
|
10
35
|
|
|
36
|
+
/**
|
|
37
|
+
* DimensionSetting is a composite control that manages two NumberSettings,
|
|
38
|
+
* one for width and one for height. It ensures that when locked, the aspect ratio
|
|
39
|
+
* is preserved. It also prevents infinite update loops via an isUpdating guard.
|
|
40
|
+
*/
|
|
41
|
+
export declare class DimensionSetting extends Setting<DimensionValue, DimensionSettingProps> {
|
|
42
|
+
inputType: {
|
|
43
|
+
readonly width: "number";
|
|
44
|
+
readonly height: "number";
|
|
45
|
+
};
|
|
46
|
+
private widthSetting;
|
|
47
|
+
private heightSetting;
|
|
48
|
+
private locked;
|
|
49
|
+
private aspectRatio;
|
|
50
|
+
private isUpdating;
|
|
51
|
+
constructor(props?: DimensionSettingProps);
|
|
52
|
+
/**
|
|
53
|
+
* Toggles the locked state. When locking, it recalculates the aspect ratio
|
|
54
|
+
* based on the current width and height. Updates the lock icon accordingly.
|
|
55
|
+
* @param lockIcon The HTMLElement containing the lock icon SVG.
|
|
56
|
+
*/
|
|
57
|
+
private toggleLock;
|
|
58
|
+
/**
|
|
59
|
+
* Returns the appropriate SVG string for the lock icon based on lock state.
|
|
60
|
+
* @param isLocked Whether the dimension is currently locked.
|
|
61
|
+
*/
|
|
62
|
+
private getLockSVG;
|
|
63
|
+
/**
|
|
64
|
+
* Renders the DimensionSetting component.
|
|
65
|
+
* It arranges the width and height NumberSettings with a bracket containing a lock icon.
|
|
66
|
+
* @returns {HTMLElement} The container element with the complete dimension control.
|
|
67
|
+
*/
|
|
68
|
+
draw(): HTMLElement;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
/**
|
|
72
|
+
* DimensionSettingProps extends the base SettingProps.
|
|
73
|
+
* It allows specifying a locked state (for aspect ratio) and optional min/max constraints.
|
|
74
|
+
*/
|
|
75
|
+
export declare interface DimensionSettingProps extends SettingProps<DimensionValue> {
|
|
76
|
+
/** When true, maintain the aspect ratio between width and height. */
|
|
77
|
+
locked?: boolean;
|
|
78
|
+
/** Optional minimum and maximum values for width and height. */
|
|
79
|
+
minWidth?: number;
|
|
80
|
+
maxWidth?: number;
|
|
81
|
+
minHeight?: number;
|
|
82
|
+
maxHeight?: number;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/**
|
|
86
|
+
* DimensionValue interface represents the two-dimensional size.
|
|
87
|
+
* Both width and height must be valid positive numbers.
|
|
88
|
+
*/
|
|
89
|
+
export declare interface DimensionValue {
|
|
90
|
+
width: number;
|
|
91
|
+
height: number;
|
|
92
|
+
}
|
|
93
|
+
|
|
11
94
|
export declare interface IChangable<T> {
|
|
12
95
|
setOnChange(onChange: (value: T) => void): void;
|
|
13
96
|
}
|
|
@@ -100,6 +183,7 @@ export declare interface SelectSettingProps extends SettingProps<string> {
|
|
|
100
183
|
export declare abstract class Setting<T, P extends SettingProps<T>> implements IDrawable, IChangable<T> {
|
|
101
184
|
protected props: P;
|
|
102
185
|
protected inputEl?: HTMLInputElement;
|
|
186
|
+
id: string;
|
|
103
187
|
value: T | undefined;
|
|
104
188
|
title: string | undefined;
|
|
105
189
|
abstract inputType: T extends Primitive ? InputTypes : Record<keyof T, InputTypes>;
|
|
@@ -116,6 +200,7 @@ export declare abstract class Setting<T, P extends SettingProps<T>> implements I
|
|
|
116
200
|
export declare class SettingGroup<T extends Record<string, Setting<any, any> | SettingGroup<any>>> implements IDrawable, IChangable<T> {
|
|
117
201
|
title: string;
|
|
118
202
|
settings: T;
|
|
203
|
+
id: string;
|
|
119
204
|
onChange?: ((value: T) => void) | undefined;
|
|
120
205
|
setOnChange(onChange: (value: T) => void): void;
|
|
121
206
|
constructor(groupProps: SettingGroupProps<T>);
|
|
@@ -125,6 +210,7 @@ export declare class SettingGroup<T extends Record<string, Setting<any, any> | S
|
|
|
125
210
|
export declare type SettingGroupProps<T> = {
|
|
126
211
|
title: string;
|
|
127
212
|
settings: T;
|
|
213
|
+
id?: string;
|
|
128
214
|
};
|
|
129
215
|
|
|
130
216
|
export declare interface SettingProps<T> {
|
|
@@ -133,6 +219,7 @@ export declare interface SettingProps<T> {
|
|
|
133
219
|
placeholder?: string;
|
|
134
220
|
icon?: string;
|
|
135
221
|
inputProps?: InputProps;
|
|
222
|
+
id?: string;
|
|
136
223
|
}
|
|
137
224
|
|
|
138
225
|
export declare class StringSetting extends Setting<string, StringSettingsProps> {
|
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.
|
|
4
|
+
"version": "0.0.49",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/builder-settings-types.cjs.js",
|
|
7
7
|
"module": "dist/builder-settings-types.es.js",
|
|
@@ -30,6 +30,7 @@
|
|
|
30
30
|
"license": "MIT",
|
|
31
31
|
"author": "onAim",
|
|
32
32
|
"dependencies": {
|
|
33
|
+
"nanoid": "^5.1.0",
|
|
33
34
|
"vite-plugin-dts": "^4.5.0"
|
|
34
35
|
}
|
|
35
36
|
}
|