builder-settings-types 0.0.50 → 0.0.52
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 +15 -8
- package/dist/builder-settings-types.es.js +134 -98
- package/dist/index.css +1 -1
- package/dist/index.d.ts +18 -2
- package/package.json +1 -1
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";let f=(o=21)=>{let t="",e=crypto.getRandomValues(new Uint8Array(o|=0));for(;o--;)t+=E[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){return this.onChange=t,x(this.settings,(e,n)=>{n.setOnChange(t)}),this}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 i=document.createElement("span");i.className="setting-group-arrow",i.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 s=document.createElement("div");s.className="setting-group-content";for(const a in this.settings){const r=this.settings[a].draw();s.appendChild(r)}return e.onclick=()=>{s.classList.toggle("collapsed"),i.classList.toggle("rotated")},e.appendChild(n),e.appendChild(i),t.appendChild(e),t.appendChild(s),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){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 n=document.createElement("div");n.className=t.wrapperClassName||"";const i=document.createElement("input");return this.inputEl=i,i.value=String(t.value||b(t.inputType)),i.type=t.inputType,i.placeholder=t.placeholder||"",i.className=t.inputClassName||"",i.oninput=s=>{const a=s.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(i),n.appendChild(i),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 d extends g{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,l=this.props.maxValue??Number.MAX_SAFE_INTEGER;let r=Number(s.value);r<a&&(r=a),r>l&&(r=l),s.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 i=document.createElement("span");return i.className="suffix-label",i.textContent=this.props.suffix,e.appendChild(i),e}}class L extends k{constructor(){super({title:"Margin",settings:{margin:new d({title:"Margin All"}),marginTop:new d({title:"Margin Top"}),marginRight:new d({title:"Margin Right"}),marginBottom:new d({title:"Margin Bottom"}),marginLeft:new d({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 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),
|
|
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),i=this.createLabel(this.title||"Color");console.log("label:",i),e.appendChild(n),e.appendChild(i);const s=document.createElement("div");s.className="color-input-wrapper";const a=/^([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/,l=u=>{const c=u.value.startsWith("#")?u.value.slice(1):u.value;return a.test(c)?(u.style.border="",!0):(u.style.border="1px solid red",!1)},r=document.createElement("div");r.className="color-preview",r.style.backgroundColor=this.value||"";const p=this.createInput({value:this.value,inputType:"text",inputClassName:"color-text-input"}),h=p.querySelector("input"),C=this.createInput({value:this.value,inputType:this.inputType,inputClassName:"color-picker"}),v=C.querySelector("input");return h.oninput=u=>{var m;let c=u.target.value.trim();c.charAt(0)!=="#"&&(c="#"+c,h.value=c),l(h)&&(this.value=c,(m=this.onChange)==null||m.call(this,c),v.value=c,r.style.backgroundColor=c)},v.oninput=u=>{var m;let c=u.target.value;c.charAt(0)!=="#"&&(c="#"+c,v.value=c),this.value=c,(m=this.onChange)==null||m.call(this,c),h.value=c,r.style.backgroundColor=c,l(h)},s.appendChild(r),s.appendChild(C),s.appendChild(p),t.appendChild(e),t.appendChild(s),t}}class M extends d{constructor(t){super({...t,minValue:0,maxValue:100,icon:t.icon||y,title:t.title||"Opacity"}),this.inputType="number"}}const y=`
|
|
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 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
|
|
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 i;(i=this.selectNode)==null||i.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||""),i=this.createLabel(this.props.title||""),s=document.createElement("select");return this.selectNode=s,s.classList.add("select"),s.onchange=p=>{var h;this.value=p.target.value,(h=this.onChange)==null||h.call(this,p.target.value)},[...this.props.options||[],...((r=(l=this.props).getOptions)==null?void 0:r.call(l))||[]].forEach(p=>{const h=this.createOption(p);s.appendChild(h)}),this.value&&(s.value=this.value),e.appendChild(n),e.appendChild(i),t.appendChild(e),t.appendChild(s),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:`
|
|
16
16
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
|
|
17
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
18
|
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
@@ -33,12 +33,19 @@
|
|
|
33
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
34
|
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
35
35
|
</svg>
|
|
36
|
-
`}].forEach(
|
|
36
|
+
`}].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 l;n.querySelectorAll(".align-option-button").forEach(r=>r.classList.remove("selected")),a.classList.add("selected"),this.value=s.name,(l=this.onChange)==null||l.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 d({title:"Width",default:this.value.width,suffix:"px",minValue:t.minWidth??1,maxValue:t.maxWidth,icon:R}),this.heightSetting=new d({title:"Height",default:this.value.height,suffix:"px",minValue:t.minHeight??1,maxValue:t.maxHeight,icon:O}),this.widthSetting.setOnChange(e=>{var s;if(this.isUpdating||isNaN(e)||e<1)return;this.isUpdating=!0;let n=e,i=this.value.height;this.locked&&isFinite(this.aspectRatio)&&!isNaN(this.aspectRatio)&&(i=Math.round(n/this.aspectRatio),i<1&&(i=1)),this.value={width:n,height:i},i!==0&&(this.aspectRatio=n/i),(s=this.onChange)==null||s.call(this,this.value),this.heightSetting.setValue(i),this.isUpdating=!1}),this.heightSetting.setOnChange(e=>{var s;if(this.isUpdating||isNaN(e)||e<1)return;this.isUpdating=!0;let n=e,i=this.value.width;this.locked&&isFinite(this.aspectRatio)&&!isNaN(this.aspectRatio)&&(i=Math.round(n*this.aspectRatio),i<1&&(i=1)),this.value={width:i,height:n},n!==0&&(this.aspectRatio=i/n),(s=this.onChange)==null||s.call(this,this.value),this.widthSetting.setValue(i),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
37
|
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none">
|
|
38
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
39
|
</svg>
|
|
40
|
-
`}draw(){const t=document.createElement("div");t.className="dimension-setting-container";const e=this.widthSetting.draw(),n=this.heightSetting.draw(),
|
|
40
|
+
`}draw(){const t=document.createElement("div");t.className="dimension-setting-container";const e=this.widthSetting.draw(),n=this.heightSetting.draw(),i=document.createElement("div");i.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),i.appendChild(s),t.appendChild(e),t.appendChild(i),t.appendChild(n),t}}const R=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
41
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>`,
|
|
42
|
+
</svg>`,O=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
43
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
|
|
44
|
+
</svg>`,A=`
|
|
45
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" viewBox="0 0 15 16" fill="none">
|
|
46
|
+
<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"/>
|
|
47
|
+
</svg>
|
|
48
|
+
`;class B extends g{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 n=document.createElement("button");n.className="upload-button",n.innerHTML=`
|
|
49
|
+
<span class="upload-icon">${A}</span>
|
|
50
|
+
<span class="upload-label">Upload</span>
|
|
51
|
+
`;const i=document.createElement("input");return i.type="file",i.accept="image/*",i.style.display="none",n.onclick=()=>{i.click()},i.onchange=()=>{var a;const s=(a=i.files)==null?void 0:a[0];if(s){const l=new FileReader;l.onload=r=>{var h,C;const p=(h=r.target)==null?void 0:h.result;this.value=p,e.src=p,(C=this.onChange)==null||C.call(this,p)},l.readAsDataURL(s)}},t.appendChild(e),t.appendChild(n),t.appendChild(i),t}}exports.AlignSetting=V;exports.ButtonSetting=I;exports.ColorSetting=S;exports.DimensionSetting=H;exports.MarginSettingGroup=L;exports.NumberSetting=d;exports.OpacitySetting=M;exports.SelectSetting=T;exports.Setting=g;exports.SettingGroup=k;exports.StringSetting=N;exports.UploadSetting=B;exports.iterateSettings=x;
|
|
@@ -14,9 +14,9 @@ function k(o, t) {
|
|
|
14
14
|
}
|
|
15
15
|
class N {
|
|
16
16
|
setOnChange(t) {
|
|
17
|
-
this.onChange = t, k(this.settings, (e, n) => {
|
|
17
|
+
return this.onChange = t, k(this.settings, (e, n) => {
|
|
18
18
|
n.setOnChange(t);
|
|
19
|
-
});
|
|
19
|
+
}), this;
|
|
20
20
|
}
|
|
21
21
|
constructor(t) {
|
|
22
22
|
this.id = t.id || f(), this.title = t.title, this.settings = t.settings, Object.assign(this, t.settings);
|
|
@@ -28,24 +28,24 @@ class N {
|
|
|
28
28
|
e.className = "setting-group-title";
|
|
29
29
|
const n = document.createElement("h3");
|
|
30
30
|
n.textContent = this.title;
|
|
31
|
-
const
|
|
32
|
-
|
|
31
|
+
const i = document.createElement("span");
|
|
32
|
+
i.className = "setting-group-arrow", i.innerHTML = `
|
|
33
33
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
34
34
|
<path d="M5 7.5L10 12.5L15 7.5" stroke="#344054" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
|
|
35
35
|
</svg>
|
|
36
36
|
`;
|
|
37
|
-
const
|
|
38
|
-
|
|
37
|
+
const s = document.createElement("div");
|
|
38
|
+
s.className = "setting-group-content";
|
|
39
39
|
for (const a in this.settings) {
|
|
40
40
|
const r = this.settings[a].draw();
|
|
41
|
-
|
|
41
|
+
s.appendChild(r);
|
|
42
42
|
}
|
|
43
43
|
return e.onclick = () => {
|
|
44
|
-
|
|
45
|
-
}, e.appendChild(n), e.appendChild(
|
|
44
|
+
s.classList.toggle("collapsed"), i.classList.toggle("rotated");
|
|
45
|
+
}, e.appendChild(n), e.appendChild(i), t.appendChild(e), t.appendChild(s), t;
|
|
46
46
|
}
|
|
47
47
|
}
|
|
48
|
-
function
|
|
48
|
+
function E(o) {
|
|
49
49
|
switch (o) {
|
|
50
50
|
case "number":
|
|
51
51
|
return 0;
|
|
@@ -68,7 +68,7 @@ class C {
|
|
|
68
68
|
this.props = t, this.id = t.id || f(), this.value = this.props.default, this.title = t.title || "";
|
|
69
69
|
}
|
|
70
70
|
setOnChange(t) {
|
|
71
|
-
this.onChange = t;
|
|
71
|
+
return this.onChange = t, this;
|
|
72
72
|
}
|
|
73
73
|
setValue(t) {
|
|
74
74
|
this.value = t, this.inputEl && (this.inputEl.value = String(t)), this.onChange && this.onChange(t);
|
|
@@ -77,25 +77,25 @@ class C {
|
|
|
77
77
|
t = { ...this.props.inputProps, ...t };
|
|
78
78
|
const e = document.createElement("div");
|
|
79
79
|
if (e.className = t.wrapperClassName || "", t.title || t.icon) {
|
|
80
|
-
const
|
|
81
|
-
if (
|
|
80
|
+
const s = document.createElement("div");
|
|
81
|
+
if (s.className = "icon-container", t.icon) {
|
|
82
82
|
const a = this.createIcon(t.icon, t.iconClassName);
|
|
83
|
-
|
|
83
|
+
s.appendChild(a);
|
|
84
84
|
}
|
|
85
85
|
if (t.title) {
|
|
86
86
|
const a = this.createLabel(t.title, t.labelClassName);
|
|
87
|
-
|
|
87
|
+
s.appendChild(a);
|
|
88
88
|
}
|
|
89
|
-
e.appendChild(
|
|
89
|
+
e.appendChild(s);
|
|
90
90
|
}
|
|
91
91
|
const n = document.createElement("div");
|
|
92
92
|
n.className = t.wrapperClassName || "";
|
|
93
|
-
const
|
|
94
|
-
return this.inputEl =
|
|
95
|
-
const a =
|
|
96
|
-
let
|
|
97
|
-
t.inputType === "number" ?
|
|
98
|
-
}, t.inputCustomizer && t.inputCustomizer(
|
|
93
|
+
const i = document.createElement("input");
|
|
94
|
+
return this.inputEl = i, i.value = String(t.value || E(t.inputType)), i.type = t.inputType, i.placeholder = t.placeholder || "", i.className = t.inputClassName || "", i.oninput = (s) => {
|
|
95
|
+
const a = s.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(i), n.appendChild(i), e.appendChild(n), e;
|
|
99
99
|
}
|
|
100
100
|
createLabel(t, e) {
|
|
101
101
|
const n = document.createElement("span");
|
|
@@ -106,16 +106,16 @@ class C {
|
|
|
106
106
|
return n.className = "input-icon " + (e || ""), n.innerHTML = t, n;
|
|
107
107
|
}
|
|
108
108
|
}
|
|
109
|
-
class
|
|
109
|
+
class d extends C {
|
|
110
110
|
constructor(t = {}) {
|
|
111
111
|
super(t), this.inputType = "number";
|
|
112
112
|
}
|
|
113
113
|
draw() {
|
|
114
|
-
const t = (
|
|
115
|
-
this.props.minValue !== void 0 && (
|
|
116
|
-
const a = this.props.minValue ?? Number.MIN_SAFE_INTEGER,
|
|
117
|
-
let r = Number(
|
|
118
|
-
r < a && (r = a), r >
|
|
114
|
+
const t = (s) => {
|
|
115
|
+
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", () => {
|
|
116
|
+
const a = this.props.minValue ?? Number.MIN_SAFE_INTEGER, l = this.props.maxValue ?? Number.MAX_SAFE_INTEGER;
|
|
117
|
+
let r = Number(s.value);
|
|
118
|
+
r < a && (r = a), r > l && (r = l), s.value = String(r);
|
|
119
119
|
});
|
|
120
120
|
}, e = this.createInput({
|
|
121
121
|
value: this.value,
|
|
@@ -133,20 +133,20 @@ class u extends C {
|
|
|
133
133
|
"input.number-setting-input"
|
|
134
134
|
);
|
|
135
135
|
n && (n.style.paddingRight = "35px");
|
|
136
|
-
const
|
|
137
|
-
return
|
|
136
|
+
const i = document.createElement("span");
|
|
137
|
+
return i.className = "suffix-label", i.textContent = this.props.suffix, e.appendChild(i), e;
|
|
138
138
|
}
|
|
139
139
|
}
|
|
140
|
-
class
|
|
140
|
+
class T extends N {
|
|
141
141
|
constructor() {
|
|
142
142
|
super({
|
|
143
143
|
title: "Margin",
|
|
144
144
|
settings: {
|
|
145
|
-
margin: new
|
|
146
|
-
marginTop: new
|
|
147
|
-
marginRight: new
|
|
148
|
-
marginBottom: new
|
|
149
|
-
marginLeft: new
|
|
145
|
+
margin: new d({ title: "Margin All" }),
|
|
146
|
+
marginTop: new d({ title: "Margin Top" }),
|
|
147
|
+
marginRight: new d({ title: "Margin Right" }),
|
|
148
|
+
marginBottom: new d({ title: "Margin Bottom" }),
|
|
149
|
+
marginLeft: new d({ title: "Margin Left" })
|
|
150
150
|
}
|
|
151
151
|
});
|
|
152
152
|
}
|
|
@@ -159,7 +159,7 @@ class S extends N {
|
|
|
159
159
|
`;
|
|
160
160
|
}
|
|
161
161
|
}
|
|
162
|
-
class
|
|
162
|
+
class L extends C {
|
|
163
163
|
constructor(t = {}) {
|
|
164
164
|
super(t), this.inputType = "text";
|
|
165
165
|
}
|
|
@@ -180,7 +180,7 @@ class E extends C {
|
|
|
180
180
|
}
|
|
181
181
|
}
|
|
182
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
|
|
183
|
+
class V extends L {
|
|
184
184
|
constructor(t) {
|
|
185
185
|
super({
|
|
186
186
|
...t,
|
|
@@ -193,40 +193,40 @@ class T extends E {
|
|
|
193
193
|
t.className = "color-setting-wrapper";
|
|
194
194
|
const e = document.createElement("div");
|
|
195
195
|
e.className = "icon-container";
|
|
196
|
-
const n = this.createIcon(this.props.icon || w),
|
|
197
|
-
e.appendChild(n), e.appendChild(
|
|
198
|
-
const
|
|
199
|
-
|
|
200
|
-
const a = /^([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/,
|
|
201
|
-
const
|
|
202
|
-
return a.test(
|
|
196
|
+
const n = this.createIcon(this.props.icon || w), i = this.createLabel(this.title || "Color");
|
|
197
|
+
console.log("label:", i), e.appendChild(n), e.appendChild(i);
|
|
198
|
+
const s = document.createElement("div");
|
|
199
|
+
s.className = "color-input-wrapper";
|
|
200
|
+
const a = /^([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/, l = (u) => {
|
|
201
|
+
const c = u.value.startsWith("#") ? u.value.slice(1) : u.value;
|
|
202
|
+
return a.test(c) ? (u.style.border = "", !0) : (u.style.border = "1px solid red", !1);
|
|
203
203
|
}, r = document.createElement("div");
|
|
204
204
|
r.className = "color-preview", r.style.backgroundColor = this.value || "";
|
|
205
|
-
const
|
|
205
|
+
const p = this.createInput({
|
|
206
206
|
value: this.value,
|
|
207
207
|
inputType: "text",
|
|
208
208
|
inputClassName: "color-text-input"
|
|
209
|
-
}), h =
|
|
209
|
+
}), h = p.querySelector(
|
|
210
210
|
"input"
|
|
211
|
-
),
|
|
211
|
+
), g = this.createInput({
|
|
212
212
|
value: this.value,
|
|
213
213
|
inputType: this.inputType,
|
|
214
214
|
inputClassName: "color-picker"
|
|
215
|
-
}),
|
|
215
|
+
}), v = g.querySelector(
|
|
216
216
|
"input"
|
|
217
217
|
);
|
|
218
|
-
return h.oninput = (
|
|
219
|
-
var
|
|
220
|
-
let
|
|
221
|
-
|
|
222
|
-
},
|
|
223
|
-
var
|
|
224
|
-
let
|
|
225
|
-
|
|
226
|
-
},
|
|
218
|
+
return h.oninput = (u) => {
|
|
219
|
+
var m;
|
|
220
|
+
let c = u.target.value.trim();
|
|
221
|
+
c.charAt(0) !== "#" && (c = "#" + c, h.value = c), l(h) && (this.value = c, (m = this.onChange) == null || m.call(this, c), v.value = c, r.style.backgroundColor = c);
|
|
222
|
+
}, v.oninput = (u) => {
|
|
223
|
+
var m;
|
|
224
|
+
let c = u.target.value;
|
|
225
|
+
c.charAt(0) !== "#" && (c = "#" + c, v.value = c), this.value = c, (m = this.onChange) == null || m.call(this, c), h.value = c, r.style.backgroundColor = c, l(h);
|
|
226
|
+
}, s.appendChild(r), s.appendChild(g), s.appendChild(p), t.appendChild(e), t.appendChild(s), t;
|
|
227
227
|
}
|
|
228
228
|
}
|
|
229
|
-
class
|
|
229
|
+
class I extends d {
|
|
230
230
|
constructor(t) {
|
|
231
231
|
super({
|
|
232
232
|
...t,
|
|
@@ -243,12 +243,12 @@ const b = `
|
|
|
243
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
244
|
</svg>
|
|
245
245
|
`;
|
|
246
|
-
class
|
|
246
|
+
class H extends C {
|
|
247
247
|
constructor(t = {}) {
|
|
248
248
|
super(t), this.inputType = "select", this.props.options || (this.props.options = []), this.props.getOptionsAsync && this.props.getOptionsAsync().then((e) => {
|
|
249
249
|
this.props.options = [...this.props.options, ...e], e.forEach((n) => {
|
|
250
|
-
var
|
|
251
|
-
(
|
|
250
|
+
var i;
|
|
251
|
+
(i = this.selectNode) == null || i.appendChild(this.createOption(n));
|
|
252
252
|
});
|
|
253
253
|
}).catch((e) => {
|
|
254
254
|
console.error("Failed to fetch async options:", e);
|
|
@@ -259,25 +259,25 @@ class I extends C {
|
|
|
259
259
|
return e.value = t.value, e.textContent = t.name, e;
|
|
260
260
|
}
|
|
261
261
|
draw() {
|
|
262
|
-
var
|
|
262
|
+
var l, r;
|
|
263
263
|
const t = document.createElement("div");
|
|
264
264
|
t.classList.add("select-container");
|
|
265
265
|
const e = document.createElement("div");
|
|
266
266
|
e.className = "icon-container";
|
|
267
|
-
const n = this.createIcon(this.props.icon || ""),
|
|
268
|
-
return this.selectNode =
|
|
267
|
+
const n = this.createIcon(this.props.icon || ""), i = this.createLabel(this.props.title || ""), s = document.createElement("select");
|
|
268
|
+
return this.selectNode = s, s.classList.add("select"), s.onchange = (p) => {
|
|
269
269
|
var h;
|
|
270
|
-
this.value =
|
|
270
|
+
this.value = p.target.value, (h = this.onChange) == null || h.call(this, p.target.value);
|
|
271
271
|
}, [
|
|
272
272
|
...this.props.options || [],
|
|
273
|
-
...((r = (
|
|
274
|
-
].forEach((
|
|
275
|
-
const h = this.createOption(
|
|
276
|
-
|
|
277
|
-
}), this.value && (
|
|
273
|
+
...((r = (l = this.props).getOptions) == null ? void 0 : r.call(l)) || []
|
|
274
|
+
].forEach((p) => {
|
|
275
|
+
const h = this.createOption(p);
|
|
276
|
+
s.appendChild(h);
|
|
277
|
+
}), this.value && (s.value = this.value), e.appendChild(n), e.appendChild(i), t.appendChild(e), t.appendChild(s), t;
|
|
278
278
|
}
|
|
279
279
|
}
|
|
280
|
-
class
|
|
280
|
+
class R extends C {
|
|
281
281
|
constructor(t = {}) {
|
|
282
282
|
super(t), this.inputType = "button", this.value || (this.value = "center");
|
|
283
283
|
}
|
|
@@ -321,16 +321,16 @@ class H extends C {
|
|
|
321
321
|
</svg>
|
|
322
322
|
`
|
|
323
323
|
}
|
|
324
|
-
].forEach((
|
|
324
|
+
].forEach((s) => {
|
|
325
325
|
const a = document.createElement("button");
|
|
326
|
-
a.className = "align-option-button", a.innerHTML =
|
|
327
|
-
var
|
|
328
|
-
n.querySelectorAll(".align-option-button").forEach((r) => r.classList.remove("selected")), a.classList.add("selected"), this.value =
|
|
326
|
+
a.className = "align-option-button", a.innerHTML = s.icon, this.value === s.name && a.classList.add("selected"), a.addEventListener("click", () => {
|
|
327
|
+
var l;
|
|
328
|
+
n.querySelectorAll(".align-option-button").forEach((r) => r.classList.remove("selected")), a.classList.add("selected"), this.value = s.name, (l = this.onChange) == null || l.call(this, this.value);
|
|
329
329
|
}), n.appendChild(a);
|
|
330
330
|
}), t.appendChild(n), t;
|
|
331
331
|
}
|
|
332
332
|
}
|
|
333
|
-
class
|
|
333
|
+
class A extends C {
|
|
334
334
|
constructor(t) {
|
|
335
335
|
super(t), this.inputType = "button";
|
|
336
336
|
}
|
|
@@ -345,7 +345,7 @@ class R extends C {
|
|
|
345
345
|
}
|
|
346
346
|
class O extends C {
|
|
347
347
|
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
|
|
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 d({
|
|
349
349
|
title: "Width",
|
|
350
350
|
default: this.value.width,
|
|
351
351
|
suffix: "px",
|
|
@@ -354,7 +354,7 @@ class O extends C {
|
|
|
354
354
|
maxValue: t.maxWidth,
|
|
355
355
|
icon: M
|
|
356
356
|
// SVG icon defined at the bottom.
|
|
357
|
-
}), this.heightSetting = new
|
|
357
|
+
}), this.heightSetting = new d({
|
|
358
358
|
title: "Height",
|
|
359
359
|
default: this.value.height,
|
|
360
360
|
suffix: "px",
|
|
@@ -362,17 +362,17 @@ class O extends C {
|
|
|
362
362
|
maxValue: t.maxHeight,
|
|
363
363
|
icon: y
|
|
364
364
|
}), this.widthSetting.setOnChange((e) => {
|
|
365
|
-
var
|
|
365
|
+
var s;
|
|
366
366
|
if (this.isUpdating || isNaN(e) || e < 1) return;
|
|
367
367
|
this.isUpdating = !0;
|
|
368
|
-
let n = e,
|
|
369
|
-
this.locked && isFinite(this.aspectRatio) && !isNaN(this.aspectRatio) && (
|
|
368
|
+
let n = e, i = this.value.height;
|
|
369
|
+
this.locked && isFinite(this.aspectRatio) && !isNaN(this.aspectRatio) && (i = Math.round(n / this.aspectRatio), i < 1 && (i = 1)), this.value = { width: n, height: i }, i !== 0 && (this.aspectRatio = n / i), (s = this.onChange) == null || s.call(this, this.value), this.heightSetting.setValue(i), this.isUpdating = !1;
|
|
370
370
|
}), this.heightSetting.setOnChange((e) => {
|
|
371
|
-
var
|
|
371
|
+
var s;
|
|
372
372
|
if (this.isUpdating || isNaN(e) || e < 1) return;
|
|
373
373
|
this.isUpdating = !0;
|
|
374
|
-
let n = e,
|
|
375
|
-
this.locked && isFinite(this.aspectRatio) && !isNaN(this.aspectRatio) && (
|
|
374
|
+
let n = e, i = this.value.width;
|
|
375
|
+
this.locked && isFinite(this.aspectRatio) && !isNaN(this.aspectRatio) && (i = Math.round(n * this.aspectRatio), i < 1 && (i = 1)), this.value = { width: i, height: n }, n !== 0 && (this.aspectRatio = i / n), (s = this.onChange) == null || s.call(this, this.value), this.widthSetting.setValue(i), this.isUpdating = !1;
|
|
376
376
|
});
|
|
377
377
|
}
|
|
378
378
|
/**
|
|
@@ -406,28 +406,64 @@ class O extends C {
|
|
|
406
406
|
draw() {
|
|
407
407
|
const t = document.createElement("div");
|
|
408
408
|
t.className = "dimension-setting-container";
|
|
409
|
-
const e = this.widthSetting.draw(), n = this.heightSetting.draw(),
|
|
410
|
-
|
|
411
|
-
const
|
|
412
|
-
return
|
|
409
|
+
const e = this.widthSetting.draw(), n = this.heightSetting.draw(), i = document.createElement("div");
|
|
410
|
+
i.className = "dimension-bracket";
|
|
411
|
+
const s = document.createElement("span");
|
|
412
|
+
return s.className = "dimension-lock-icon", s.innerHTML = this.getLockSVG(this.locked), s.onclick = () => this.toggleLock(s), i.appendChild(s), t.appendChild(e), t.appendChild(i), t.appendChild(n), t;
|
|
413
413
|
}
|
|
414
414
|
}
|
|
415
415
|
const M = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
416
416
|
<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
417
|
</svg>`, y = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
418
418
|
<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
|
|
419
|
+
</svg>`, S = `
|
|
420
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" viewBox="0 0 15 16" fill="none">
|
|
421
|
+
<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"/>
|
|
422
|
+
</svg>
|
|
423
|
+
`;
|
|
424
|
+
class B extends C {
|
|
425
|
+
constructor(t = {}) {
|
|
426
|
+
super(t), this.inputType = "button", !this.value && t.defaultUrl && (this.value = t.defaultUrl);
|
|
427
|
+
}
|
|
428
|
+
draw() {
|
|
429
|
+
const t = document.createElement("div");
|
|
430
|
+
t.className = "upload-setting-wrapper";
|
|
431
|
+
const e = document.createElement("img");
|
|
432
|
+
e.className = "upload-preview", e.src = this.value || this.props.defaultUrl || "";
|
|
433
|
+
const n = document.createElement("button");
|
|
434
|
+
n.className = "upload-button", n.innerHTML = `
|
|
435
|
+
<span class="upload-icon">${S}</span>
|
|
436
|
+
<span class="upload-label">Upload</span>
|
|
437
|
+
`;
|
|
438
|
+
const i = document.createElement("input");
|
|
439
|
+
return i.type = "file", i.accept = "image/*", i.style.display = "none", n.onclick = () => {
|
|
440
|
+
i.click();
|
|
441
|
+
}, i.onchange = () => {
|
|
442
|
+
var a;
|
|
443
|
+
const s = (a = i.files) == null ? void 0 : a[0];
|
|
444
|
+
if (s) {
|
|
445
|
+
const l = new FileReader();
|
|
446
|
+
l.onload = (r) => {
|
|
447
|
+
var h, g;
|
|
448
|
+
const p = (h = r.target) == null ? void 0 : h.result;
|
|
449
|
+
this.value = p, e.src = p, (g = this.onChange) == null || g.call(this, p);
|
|
450
|
+
}, l.readAsDataURL(s);
|
|
451
|
+
}
|
|
452
|
+
}, t.appendChild(e), t.appendChild(n), t.appendChild(i), t;
|
|
453
|
+
}
|
|
454
|
+
}
|
|
420
455
|
export {
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
456
|
+
R as AlignSetting,
|
|
457
|
+
A as ButtonSetting,
|
|
458
|
+
V as ColorSetting,
|
|
424
459
|
O as DimensionSetting,
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
460
|
+
T as MarginSettingGroup,
|
|
461
|
+
d as NumberSetting,
|
|
462
|
+
I as OpacitySetting,
|
|
463
|
+
H as SelectSetting,
|
|
429
464
|
C as Setting,
|
|
430
465
|
N as SettingGroup,
|
|
431
|
-
|
|
466
|
+
L as StringSetting,
|
|
467
|
+
B as UploadSetting,
|
|
432
468
|
k as iterateSettings
|
|
433
469
|
};
|
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:
|
|
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:fit-content;opacity:1;transition:max-height .3s ease-in-out,opacity .2s 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}.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
|
@@ -188,7 +188,7 @@ export declare abstract class Setting<T, P extends SettingProps<T>> implements I
|
|
|
188
188
|
abstract inputType: T extends Primitive ? InputTypes : Record<keyof T, InputTypes>;
|
|
189
189
|
onChange: ((value: T) => void) | undefined;
|
|
190
190
|
constructor(props?: P);
|
|
191
|
-
setOnChange(onChange: (value: T) => void):
|
|
191
|
+
setOnChange(onChange: (value: T) => void): Setting<T, P>;
|
|
192
192
|
setValue(newValue: T): void;
|
|
193
193
|
abstract draw(): HTMLElement;
|
|
194
194
|
createInput(props: InputProps): HTMLElement;
|
|
@@ -201,7 +201,7 @@ export declare class SettingGroup<T extends Record<string, Setting<any, any> | S
|
|
|
201
201
|
settings: T;
|
|
202
202
|
id: string;
|
|
203
203
|
onChange?: ((value: T) => void) | undefined;
|
|
204
|
-
setOnChange(onChange: (value: T) => void):
|
|
204
|
+
setOnChange(onChange: (value: T) => void): SettingGroup<T>;
|
|
205
205
|
constructor(groupProps: SettingGroupProps<T>);
|
|
206
206
|
draw(): HTMLElement;
|
|
207
207
|
}
|
|
@@ -235,4 +235,20 @@ export declare interface StringSettingsProps extends SettingProps<string> {
|
|
|
235
235
|
wrapperClassName?: string;
|
|
236
236
|
}
|
|
237
237
|
|
|
238
|
+
/**
|
|
239
|
+
* A Setting subclass that displays an image preview (if any)
|
|
240
|
+
* and an "Upload" button with an icon. The user can select a file,
|
|
241
|
+
* which updates this.value with a data URL of the image.
|
|
242
|
+
*/
|
|
243
|
+
export declare class UploadSetting extends Setting<string, UploadSettingProps> {
|
|
244
|
+
inputType: InputTypes;
|
|
245
|
+
constructor(props?: UploadSettingProps);
|
|
246
|
+
draw(): HTMLElement;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
export declare interface UploadSettingProps extends SettingProps<string> {
|
|
250
|
+
/** Optional placeholder image or default URL */
|
|
251
|
+
defaultUrl?: string;
|
|
252
|
+
}
|
|
253
|
+
|
|
238
254
|
export { }
|
package/package.json
CHANGED