builder-settings-types 0.0.66 → 0.0.67
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 +40 -31
- package/dist/builder-settings-types.es.js +208 -191
- package/dist/index.css +1 -1
- package/dist/index.d.ts +9 -4
- package/package.json +1 -1
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const T="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";let E=(l=21)=>{let t="",e=crypto.getRandomValues(new Uint8Array(l|=0));for(;l--;)t+=T[e[l]&63];return t};function N(l,t){for(const e in l)if(l.hasOwnProperty(e)){const i=l[e];t(e,i)}}class g{constructor(t){this.id=t.id||E(),this.title=t.title,this.settings=t.settings,this.isCollapsed=t.collapsed??!1,Object.assign(this,t.settings)}setOnChange(t){return this.onChange=t,N(this.settings,(e,i)=>{i.setOnChange(t)}),this}getValues(t){if(t===void 0){const e={};for(const i in this.settings)if(this.settings.hasOwnProperty(i)){const n=this.settings[i];n instanceof g?e[i]=n.getValues():e[i]=n.value}return e}else{const e=this.settings[t];return e?e instanceof g?e.getValues():e.value:void 0}}draw(){const t=document.createElement("div");t.className="setting-group";const e=document.createElement("div");e.className="setting-group-title";const i=document.createElement("h3");i.textContent=this.title;const n=document.createElement("span");n.className="setting-group-arrow",n.innerHTML=`
|
|
2
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
3
|
+
<path d="M5 7.5L10 12.5L15 7.5" stroke="#344054" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
|
+
</svg>
|
|
5
|
+
`;const s=document.createElement("div");s.className="setting-group-content",this.isCollapsed&&(s.classList.add("collapsed"),n.classList.add("rotated")),e.onclick=()=>{this.isCollapsed=!this.isCollapsed,s.classList.toggle("collapsed"),n.classList.toggle("rotated")},e.appendChild(i),e.appendChild(n);for(const a in this.settings)if(this.settings.hasOwnProperty(a)){const o=this.settings[a];s.appendChild(o.draw())}return t.appendChild(e),t.appendChild(s),t}}function B(l){switch(l){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 p{constructor(t={}){this.props=t,this.id=t.id||E(),this.value=this.props.default,this.title=t.title||""}setOnChange(t){return this.onChange=t,this}setValue(t){this.value=t,this.inputEl&&(this.inputEl.value=String(t)),this.onChange&&this.onChange(t)}createInput(t){t={...this.props.inputProps,...t};const e=document.createElement("div");if(e.className=t.wrapperClassName||"",t.title||t.icon){const s=document.createElement("div");if(s.className="icon-container",t.icon){const a=this.createIcon(t.icon,t.iconClassName);s.appendChild(a)}if(t.title){const a=this.createLabel(t.title,t.labelClassName);s.appendChild(a)}e.appendChild(s)}const i=document.createElement("div");i.className=t.wrapperClassName||"";const n=document.createElement("input");return this.inputEl=n,n.value=String(t.value||B(t.inputType)),n.type=t.inputType,n.placeholder=t.placeholder||"",n.className=t.inputClassName||"",n.oninput=s=>{const a=s.target;let o=a.value;t.inputType==="number"?o=Number(a.value):(t.inputType==="color"||t.inputType==="date")&&(o=a.value),this.value=o,this.onChange&&this.onChange(this.value)},t.inputCustomizer&&t.inputCustomizer(n),i.appendChild(n),e.appendChild(i),e}createLabel(t,e){const i=document.createElement("span");return i.textContent=t,i.className="input-label "+(e||""),i}createIcon(t,e){const i=document.createElement("span");return i.className="input-icon "+(e||""),i.innerHTML=t,i}}class k extends p{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 S="<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 y extends k{constructor(t){super({...t,icon:t.icon||S,title:t.title||"Color"}),this.inputType="color"}draw(){const t=document.createElement("div");t.className="color-setting-wrapper";const e=document.createElement("div");e.className="icon-container";const i=this.createIcon(this.props.icon||S),n=this.createLabel(this.title||"Color");e.appendChild(i),e.appendChild(n);const s=document.createElement("div");s.className="color-input-wrapper";const a=/^([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/,o=d=>{const c=d.value.startsWith("#")?d.value.slice(1):d.value;return a.test(c)?(d.style.border="",!0):(d.style.border="1px solid red",!1)},r=document.createElement("div");r.className="color-preview",r.style.backgroundColor=this.value||"";const u=this.createInput({value:this.value,inputType:"text",inputClassName:"color-text-input"}),h=u.querySelector("input"),M=this.createInput({value:this.value,inputType:this.inputType,inputClassName:"color-picker"}),m=M.querySelector("input");return h.oninput=d=>{var v;let c=d.target.value.trim();c.charAt(0)!=="#"&&(c="#"+c,h.value=c),o(h)&&(this.value=c,(v=this.onChange)==null||v.call(this,c),m.value=c,r.style.backgroundColor=c)},m.oninput=d=>{var v;let c=d.target.value;c.charAt(0)!=="#"&&(c="#"+c,m.value=c),this.value=c,(v=this.onChange)==null||v.call(this,c),h.value=c,r.style.backgroundColor=c,o(h)},s.appendChild(r),s.appendChild(M),s.appendChild(u),t.appendChild(e),t.appendChild(s),t}}class C extends p{constructor(t={}){super(t),this.inputType="number"}draw(){const t=s=>{this.props.minValue!==void 0&&(s.min=String(this.props.minValue)),this.props.maxValue!==void 0&&(s.max=String(this.props.maxValue)),this.props.className&&s.classList.add(this.props.className),s.addEventListener("input",()=>{const a=this.props.minValue??Number.MIN_SAFE_INTEGER,o=this.props.maxValue??Number.MAX_SAFE_INTEGER;let r=Number(s.value);r<a&&(r=a),r>o&&(r=o),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 i=e.querySelector("input.number-setting-input");i&&(i.style.paddingRight="35px");const n=document.createElement("span");return n.className="suffix-label",n.textContent=this.props.suffix,e.appendChild(n),e}}class f extends C{constructor(t){super({...t,minValue:0,maxValue:100,icon:t.icon||I,title:t.title||"Opacity"}),this.inputType="number"}}const I=`
|
|
6
6
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
7
7
|
<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"/>
|
|
8
8
|
<path d="M9.00014 17.5623C6.84764 17.5623 4.82266 16.7223 3.30016 15.1998C3.19516 15.0948 3.13513 14.9523 3.13513 14.8023C3.13513 14.6523 3.19516 14.5098 3.30016 14.4048L13.9051 3.79984C14.1226 3.58234 14.4826 3.58234 14.7001 3.79984C16.2226 5.32234 17.0626 7.34734 17.0626 9.49984C17.0626 13.9473 13.4476 17.5623 9.00014 17.5623ZM4.50764 14.7873C5.76014 15.8523 7.33514 16.4373 9.00014 16.4373C12.8251 16.4373 15.9376 13.3248 15.9376 9.49984C15.9376 7.83484 15.3526 6.25984 14.2876 5.00734L4.50764 14.7873Z" fill="#667085"/>
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
<path d="M13.4025 15.5225C13.26 15.5225 13.1175 15.47 13.005 15.3575L8.06999 10.4225C7.85249 10.205 7.85249 9.84498 8.06999 9.62748C8.28749 9.40998 8.64748 9.40998 8.86498 9.62748L13.8 14.5625C14.0175 14.78 14.0175 15.14 13.8 15.3575C13.6875 15.47 13.545 15.5225 13.4025 15.5225Z" fill="#667085"/>
|
|
11
11
|
<path d="M15.84 12.6648C15.6975 12.6648 15.555 12.6123 15.4425 12.4998L10.725 7.78234C10.5075 7.56484 10.5075 7.20484 10.725 6.98734C10.9425 6.76984 11.3025 6.76984 11.52 6.98734L16.2375 11.7048C16.455 11.9223 16.455 12.2823 16.2375 12.4998C16.1325 12.6048 15.99 12.6648 15.84 12.6648Z" fill="#667085"/>
|
|
12
12
|
</svg>
|
|
13
|
-
`;class H extends p{constructor(t={}){super(t),this.inputType="select",this._options=[],t.options&&(this._options=[...t.options]),t.getOptions&&this._options.push(...t.getOptions()),t.getOptionsAsync&&t.getOptionsAsync().then(e=>{this._options.push(...e),this.selectNode&&e.forEach((i,n)=>{const s=this._options.length-e.length+n;this.selectNode.appendChild(this.createOption(i,s))})}).catch(e=>{console.error("Failed to fetch async options:",e)})}createOption(t,e){const i=document.createElement("option");return i.value=String(e),i.textContent=t.name,i}draw(){const t=document.createElement("div");if(t.classList.add("select-container"),this.props.icon||this.props.title){const i=document.createElement("div");if(i.className="icon-container",this.props.icon){const n=this.createIcon(this.props.icon);i.appendChild(n)}if(this.props.title){const n=this.createLabel(this.props.title);i.appendChild(n)}t.appendChild(i)}const e=document.createElement("select");if(this.selectNode=e,e.classList.add("select"),this._options.forEach((i,n)=>{const s=this.createOption(i,n);e.appendChild(s)}),this.value!==void 0){const i=this._options.findIndex(n=>n.value===this.value);i>=0&&(e.value=String(i))}return e.onchange=i=>{var
|
|
13
|
+
`;class H extends p{constructor(t={}){super(t),this.inputType="select",this._options=[],t.options&&(this._options=[...t.options]),t.getOptions&&this._options.push(...t.getOptions()),t.getOptionsAsync&&t.getOptionsAsync().then(e=>{this._options.push(...e),this.selectNode&&e.forEach((i,n)=>{const s=this._options.length-e.length+n;this.selectNode.appendChild(this.createOption(i,s))})}).catch(e=>{console.error("Failed to fetch async options:",e)})}createOption(t,e){const i=document.createElement("option");return i.value=String(e),i.textContent=t.name,i}draw(){const t=document.createElement("div");if(t.classList.add("select-container"),this.props.icon||this.props.title){const i=document.createElement("div");if(i.className="icon-container",this.props.icon){const n=this.createIcon(this.props.icon);i.appendChild(n)}if(this.props.title){const n=this.createLabel(this.props.title);i.appendChild(n)}t.appendChild(i)}const e=document.createElement("select");if(this.selectNode=e,e.classList.add("select"),this._options.forEach((i,n)=>{const s=this.createOption(i,n);e.appendChild(s)}),this.value!==void 0){const i=this._options.findIndex(n=>n.value===this.value);i>=0&&(e.value=String(i))}return e.onchange=i=>{var a;const n=Number(i.target.value),s=this._options[n];s&&(this.value=s.value,(a=this.onChange)==null||a.call(this,this.value))},t.appendChild(e),t}}class L extends p{constructor(t={}){super(t),this.inputType="button",this.value||(this.value="center")}draw(){const t=document.createElement("div");t.className="align-setting-wrapper";const e=document.createElement("label");e.className="align-setting-label",e.textContent=this.title||"Align",t.appendChild(e);const i=document.createElement("div");return i.className="align-options-container",[{name:"left",icon:`
|
|
14
14
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
|
|
15
15
|
<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"
|
|
16
16
|
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
<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"
|
|
32
32
|
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
33
33
|
</svg>
|
|
34
|
-
`}].forEach(s=>{const
|
|
34
|
+
`}].forEach(s=>{const a=document.createElement("button");a.className="align-option-button",a.innerHTML=s.icon,this.value===s.name&&a.classList.add("selected"),a.addEventListener("click",()=>{var o;i.querySelectorAll(".align-option-button").forEach(r=>r.classList.remove("selected")),a.classList.add("selected"),this.value=s.name,(o=this.onChange)==null||o.call(this,this.value)}),i.appendChild(a)}),t.appendChild(i),t}}class O extends p{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 R extends p{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 C({title:"Width",default:this.value.width,suffix:"px",minValue:t.minWidth??1,maxValue:t.maxWidth,icon:j}),this.heightSetting=new C({title:"Height",default:this.value.height,suffix:"px",minValue:t.minHeight??1,maxValue:t.maxHeight,icon:$}),this.widthSetting.setOnChange(e=>{var s;if(this.isUpdating||isNaN(e)||e<1)return;this.isUpdating=!0;let i=e,n=this.value.height;this.locked&&isFinite(this.aspectRatio)&&!isNaN(this.aspectRatio)&&(n=Math.round(i/this.aspectRatio),n<1&&(n=1)),this.value={width:i,height:n},n!==0&&(this.aspectRatio=i/n),(s=this.onChange)==null||s.call(this,this.value),this.heightSetting.setValue(n),this.isUpdating=!1}),this.heightSetting.setOnChange(e=>{var s;if(this.isUpdating||isNaN(e)||e<1)return;this.isUpdating=!0;let i=e,n=this.value.width;this.locked&&isFinite(this.aspectRatio)&&!isNaN(this.aspectRatio)&&(n=Math.round(i*this.aspectRatio),n<1&&(n=1)),this.value={width:n,height:i},i!==0&&(this.aspectRatio=n/i),(s=this.onChange)==null||s.call(this,this.value),this.widthSetting.setValue(n),this.isUpdating=!1})}toggleLock(t){if(this.locked=!this.locked,this.locked){const e=this.value.width,i=this.value.height;i!==0&&(this.aspectRatio=e/i)}t.innerHTML=this.getLockSVG(this.locked)}getLockSVG(t){return t?`
|
|
35
35
|
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none">
|
|
36
36
|
<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"/>
|
|
37
37
|
</svg>
|
|
@@ -39,67 +39,76 @@
|
|
|
39
39
|
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none">
|
|
40
40
|
<path d="M2.91663 4.58333V3.33333C2.91663 2.18274 3.84937 1.25 4.99996 1.25M3.66663 8.75H6.33329C7.03336 8.75 7.38339 8.75 7.65078 8.61376C7.88598 8.49392 8.07721 8.30269 8.19705 8.06749C8.33329 7.8001 8.33329 7.45007 8.33329 6.75V6.58333C8.33329 5.88327 8.33329 5.53323 8.19705 5.26584C8.07721 5.03064 7.88598 4.83942 7.65078 4.71958C7.38339 4.58333 7.03336 4.58333 6.33329 4.58333H3.66663C2.96656 4.58333 2.61653 4.58333 2.34914 4.71958C2.11394 4.83942 1.92271 5.03064 1.80287 5.26584C1.66663 5.53323 1.66663 5.88327 1.66663 6.58333V6.75C1.66663 7.45007 1.66663 7.8001 1.80287 8.06749C1.92271 8.30269 2.11394 8.49392 2.34914 8.61376C2.61653 8.75 2.96656 8.75 3.66663 8.75Z" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
41
41
|
</svg>
|
|
42
|
-
`}draw(){const t=document.createElement("div");t.className="dimension-setting-container";const e=this.widthSetting.draw(),i=this.heightSetting.draw(),n=document.createElement("div");n.className="dimension-bracket";const s=document.createElement("span");return s.className="dimension-lock-icon",s.innerHTML=this.getLockSVG(this.locked),s.onclick=()=>this.toggleLock(s),n.appendChild(s),t.appendChild(e),t.appendChild(n),t.appendChild(i),t}}const
|
|
42
|
+
`}draw(){const t=document.createElement("div");t.className="dimension-setting-container";const e=this.widthSetting.draw(),i=this.heightSetting.draw(),n=document.createElement("div");n.className="dimension-bracket";const s=document.createElement("span");return s.className="dimension-lock-icon",s.innerHTML=this.getLockSVG(this.locked),s.onclick=()=>this.toggleLock(s),n.appendChild(s),t.appendChild(e),t.appendChild(n),t.appendChild(i),t}}const j=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
43
43
|
<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"/>
|
|
44
|
-
</svg
|
|
44
|
+
</svg>`,$=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
45
45
|
<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"/>
|
|
46
|
-
</svg
|
|
46
|
+
</svg>`,W=`
|
|
47
47
|
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" viewBox="0 0 15 16" fill="none">
|
|
48
48
|
<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"/>
|
|
49
49
|
</svg>
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
50
|
+
`,A=`
|
|
51
|
+
<svg width="91" height="71" viewBox="0 0 91 71" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
52
|
+
<rect width="91" height="71" rx="4" fill="#F2F4F7"/>
|
|
53
|
+
<path d="M37 31.5L39.5 29M39.5 29L42 31.5M39.5 29V34.625M44.5 31.9643C45.2634 31.3338 45.75 30.38 45.75 29.3125C45.75 27.414 44.211 25.875 42.3125 25.875C42.1759 25.875 42.0482 25.8037 41.9788 25.6861C41.1638 24.303 39.659 23.375 37.9375 23.375C35.3487 23.375 33.25 25.4737 33.25 28.0625C33.25 29.3538 33.7721 30.5232 34.6168 31.371" stroke="#475467" stroke-linecap="round" stroke-linejoin="round"/>
|
|
54
|
+
</svg>
|
|
55
|
+
`,G=`
|
|
56
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 12 12" fill="none">
|
|
57
|
+
<path d="M8 3V2.6C8 2.03995 8 1.75992 7.89101 1.54601C7.79513 1.35785 7.64215 1.20487 7.45399 1.10899C7.24008 1 6.96005 1 6.4 1H5.6C5.03995 1 4.75992 1 4.54601 1.10899C4.35785 1.20487 4.20487 1.35785 4.10899 1.54601C4 1.75992 4 2.03995 4 2.6V3M5 5.75V8.25M7 5.75V8.25M1.5 3H10.5M9.5 3V8.6C9.5 9.44008 9.5 9.86012 9.33651 10.181C9.1927 10.4632 8.96323 10.6927 8.68099 10.8365C8.36012 11 7.94008 11 7.1 11H4.9C4.05992 11 3.63988 11 3.31901 10.8365C3.03677 10.6927 2.8073 10.4632 2.66349 10.181C2.5 9.86012 2.5 9.44008 2.5 8.6V3" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
58
|
+
</svg>
|
|
59
|
+
`;class V extends p{constructor(t={}){super(t),this.inputType="button",this.previewWrapper=null,this.previewEl=null,this.emptyStateEl=null,!this.value&&t.defaultUrl&&t.defaultUrl!==""&&(this.value=t.defaultUrl)}updatePreviewState(t=null){!this.previewWrapper||!this.previewEl||!this.emptyStateEl||(t&&t!==""?(this.previewEl.style.display="block",this.emptyStateEl.style.display="none",this.previewEl.src=t,this.previewWrapper.classList.add("has-image")):(this.previewEl.style.display="none",this.emptyStateEl.style.display="block",this.previewEl.src="",this.previewWrapper.classList.remove("has-image")))}draw(){const t=document.createElement("div");t.className="upload-setting-wrapper",this.previewWrapper=document.createElement("div"),this.previewWrapper.className="preview-wrapper",this.emptyStateEl=document.createElement("div"),this.emptyStateEl.className="empty-state",this.emptyStateEl.innerHTML=A,this.previewEl=document.createElement("img"),this.previewEl.className="upload-preview",this.value&&this.value!==""?this.updatePreviewState(this.value):this.updatePreviewState(null);const i=document.createElement("button");i.className="delete-button",i.type="button",i.title="Delete image",i.innerHTML=G,i.onclick=a=>{var o;a.stopPropagation(),this.value="",this.updatePreviewState(null),(o=this.onChange)==null||o.call(this,"")},this.previewWrapper.appendChild(this.emptyStateEl),this.previewWrapper.appendChild(this.previewEl),this.previewWrapper.appendChild(i);const n=document.createElement("button");n.className="upload-button",n.innerHTML=`
|
|
60
|
+
<span class="upload-icon">${W}</span>
|
|
61
|
+
<span class="upload-label">Upload</span>
|
|
62
|
+
`;const s=document.createElement("input");return s.type="file",s.accept="image/*",s.style.display="none",n.onclick=()=>{s.click()},s.onchange=async()=>{var o,r,u;const a=(o=s.files)==null?void 0:o[0];if(a)try{const h=new FormData,M=this.props.formFieldName||"file";h.append(M,a,a.name);const m=this.props.uploadUrl;if(!m)throw new Error("No uploadUrl provided to UploadSetting.");const d=this.props.requestMethod||"POST",c={...this.props.requestHeaders||{}},x=await(await fetch(m,{method:d,body:h,headers:c})).json();let w;if(this.props.parseResponse)w=this.props.parseResponse(x);else if(w=(r=x==null?void 0:x.data)==null?void 0:r.url,!w)throw new Error("No URL found in response. Provide a parseResponse if needed.");this.value=w,this.updatePreviewState(w),(u=this.onChange)==null||u.call(this,w)}catch(h){console.error("Error uploading file:",h),this.updatePreviewState(null)}},t.appendChild(this.previewWrapper),t.appendChild(n),t.appendChild(s),t}}class _ extends p{constructor(t={}){super(t),this.inputType="number",this.value=this.value??100,this.numberSetting=new C({title:"Height",default:this.value,suffix:"px",minValue:t.minHeight??1,maxValue:t.maxHeight,icon:F}),this.numberSetting.setOnChange(e=>{var i;isNaN(e)||e<1||(this.value=e,(i=this.onChange)==null||i.call(this,this.value))})}draw(){return this.numberSetting.draw()}}const F=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
54
63
|
<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"/>
|
|
55
|
-
</svg>`;class
|
|
64
|
+
</svg>`;class Z extends p{constructor(t={}){super(t),this.inputType="number",this.value=this.value??100,this.numberSetting=new C({title:"Width",default:this.value,suffix:"px",minValue:t.minWidth??1,maxValue:t.maxWidth,icon:z}),this.numberSetting.setOnChange(e=>{var i;isNaN(e)||e<1||(this.value=e,(i=this.onChange)==null||i.call(this,this.value))})}draw(){return this.numberSetting.draw()}}const z=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
56
65
|
<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"/>
|
|
57
66
|
</svg>`,U=`
|
|
58
67
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
59
68
|
<path d="M5.625 9.5H5.6325M12.375 9.5H12.3825M9 9.5H9.0075M9 12.875H9.0075M9 6.125H9.0075M2.25 6.35L2.25 12.65C2.25 13.9101 2.25 14.5402 2.49524 15.0215C2.71095 15.4448 3.05516 15.789 3.47852 16.0048C3.95982 16.25 4.58988 16.25 5.85 16.25H12.15C13.4101 16.25 14.0402 16.25 14.5215 16.0048C14.9448 15.789 15.289 15.4448 15.5048 15.0215C15.75 14.5402 15.75 13.9101 15.75 12.65V6.35C15.75 5.08988 15.75 4.45982 15.5048 3.97852C15.289 3.55516 14.9448 3.21095 14.5215 2.99524C14.0402 2.75 13.4101 2.75 12.15 2.75L5.85 2.75C4.58988 2.75 3.95982 2.75 3.47852 2.99524C3.05516 3.21095 2.71095 3.55516 2.49524 3.97852C2.25 4.45982 2.25 5.08988 2.25 6.35Z" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
60
69
|
</svg>
|
|
61
|
-
`,
|
|
70
|
+
`,D=`
|
|
62
71
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
63
72
|
<path d="M6 2.75H5.85C4.58988 2.75 3.95982 2.75 3.47852 2.99524C3.05516 3.21095 2.71095 3.55516 2.49524 3.97852C2.25 4.45982 2.25 5.08988 2.25 6.35V6.5M6 16.25H5.85C4.58988 16.25 3.95982 16.25 3.47852 16.0048C3.05516 15.789 2.71095 15.4448 2.49524 15.0215C2.25 14.5402 2.25 13.9101 2.25 12.65V12.5M15.75 6.5V6.35C15.75 5.08988 15.75 4.45982 15.5048 3.97852C15.289 3.55516 14.9448 3.21095 14.5215 2.99524C14.0402 2.75 13.4101 2.75 12.15 2.75H12M15.75 12.5V12.65C15.75 13.9101 15.75 14.5402 15.5048 15.0215C15.289 15.4448 14.9448 15.789 14.5215 16.0048C14.0402 16.25 13.4101 16.25 12.15 16.25H12" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
64
73
|
</svg>
|
|
65
|
-
`;class
|
|
74
|
+
`;class q extends g{constructor(t){super({title:"Border",collapsed:t==null?void 0:t.collapsed,settings:{color:new y({default:(t==null?void 0:t.color)??"#00141E"}),opacity:new f({default:(t==null?void 0:t.opacity)??100,minValue:0,maxValue:100}),radius:new C({title:"Radius",icon:U,default:(t==null?void 0:t.radius)??12,suffix:"px"}),size:new C({title:"Size",icon:D,default:(t==null?void 0:t.size)??0,suffix:"px"})}})}getCssCode(){const t=this.settings.color.value??"#000000",e=this.settings.opacity.value??100,i=this.settings.radius.value??0,n=this.settings.size.value??0;return`
|
|
66
75
|
border-color: ${t};
|
|
67
76
|
border-width: ${n}px;
|
|
68
77
|
border-radius: ${i}px;
|
|
69
78
|
opacity: ${e/100};
|
|
70
|
-
`}}const
|
|
79
|
+
`}}const P=`
|
|
71
80
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="13" viewBox="0 0 14 13" fill="none">
|
|
72
81
|
<path d="M1 2.75C1 2.05109 1 1.70163 1.11418 1.42597C1.26642 1.05843 1.55843 0.766422 1.92597 0.614181C2.20163 0.5 2.55109 0.5 3.25 0.5H10.75C11.4489 0.5 11.7984 0.5 12.074 0.614181C12.4416 0.766422 12.7336 1.05843 12.8858 1.42597C13 1.70163 13 2.05109 13 2.75M4.75 12.5H9.25M7 0.5V12.5" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
73
82
|
</svg>
|
|
74
|
-
`,
|
|
83
|
+
`,X=`
|
|
75
84
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
76
85
|
<path d="M3 5.75C3 5.05109 3 4.70163 3.11418 4.42597C3.26642 4.05843 3.55843 3.76642 3.92597 3.61418C4.20163 3.5 4.55109 3.5 5.25 3.5H12.75C13.4489 3.5 13.7984 3.5 14.074 3.61418C14.4416 3.76642 14.7336 4.05843 14.8858 4.42597C15 4.70163 15 5.05109 15 5.75M6 15.5H12M7.6875 3.5V15.5M10.3125 3.5V15.5" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
77
86
|
</svg>
|
|
78
|
-
`,
|
|
87
|
+
`,J=`
|
|
79
88
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
80
89
|
<path d="M6 5.75H12M9 5.75V13.25M5.85 16.25H12.15C13.4101 16.25 14.0402 16.25 14.5215 16.0048C14.9448 15.789 15.289 15.4448 15.5048 15.0215C15.75 14.5402 15.75 13.9101 15.75 12.65V6.35C15.75 5.08988 15.75 4.45982 15.5048 3.97852C15.289 3.55516 14.9448 3.21095 14.5215 2.99524C14.0402 2.75 13.4101 2.75 12.15 2.75H5.85C4.58988 2.75 3.95982 2.75 3.47852 2.99524C3.05516 3.21095 2.71095 3.55516 2.49524 3.97852C2.25 4.45982 2.25 5.08988 2.25 6.35V12.65C2.25 13.9101 2.25 14.5402 2.49524 15.0215C2.71095 15.4448 3.05516 15.789 3.47852 16.0048C3.95982 16.25 4.58988 16.25 5.85 16.25Z" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
81
90
|
</svg>
|
|
82
|
-
`;class
|
|
91
|
+
`;class Q extends g{constructor(t={}){super({title:t.title||"Typography",collapsed:t.collapsed,settings:{color:new y({default:t.colorDefault??"#00141E"}),opacity:new f({default:t.colorOpacityDefault??100}),fontFamily:new H({title:"Font",icon:P,default:t.fontFamilyDefault??"Satoshi",options:t.fontFamilyOptions??[{name:"Satoshi",value:"Satoshi"},{name:"Arial",value:"Arial"},{name:"Roboto",value:"Roboto"}],getOptions:t.fontFamilyGetOptions,getOptionsAsync:t.fontFamilyGetOptionsAsync}),fontWeight:new H({title:"Weight",icon:X,default:t.fontWeightDefault??"bold",options:t.fontWeightOptions??[{name:"Regular",value:"regular"},{name:"Medium",value:"medium"},{name:"Bold",value:"bold"}],getOptions:t.fontWeightGetOptions,getOptionsAsync:t.fontWeightGetOptionsAsync}),fontSize:new C({title:"Size",icon:J,default:t.fontSizeDefault??12,suffix:"px"}),align:new L({title:"Align",default:t.alignDefault??"center"})}})}getCssCode(){const t=this.settings.color.value??"#000000",e=this.settings.opacity.value??100,i=this.settings.fontFamily.value??"Satoshi",n=this.settings.fontWeight.value??"bold",s=this.settings.fontSize.value??12,a=this.settings.align.value??"left";return`
|
|
83
92
|
color: ${t};
|
|
84
93
|
opacity: ${e/100};
|
|
85
94
|
font-family: ${i};
|
|
86
95
|
font-weight: ${n};
|
|
87
96
|
font-size: ${s}px;
|
|
88
|
-
text-align: ${
|
|
89
|
-
`}}class
|
|
97
|
+
text-align: ${a};
|
|
98
|
+
`}}class b extends p{constructor(t){super({...t,default:t.default!==void 0?t.default:"auto"}),this.inputType="number",this.value=t.default!==void 0?t.default:"auto"}draw(){const t=this.value==="auto"?"text":"number",e=o=>{this.value!=="auto"&&(this.props.minValue!==void 0&&(o.min=String(this.props.minValue)),this.props.maxValue!==void 0&&(o.max=String(this.props.maxValue)),this.props.className&&o.classList.add(this.props.className),o.addEventListener("input",()=>{const r=this.props.minValue??Number.MIN_SAFE_INTEGER,u=this.props.maxValue??Number.MAX_SAFE_INTEGER;let h=Number(o.value);h<r&&(h=r),h>u&&(h=u),o.value=String(h)}))},i=this.createInput({value:this.value,inputType:t,title:this.props.title,icon:this.props.icon,inputClassName:"number-setting-input "+(this.props.inputClassName||""),wrapperClassName:"number-setting-wrapper "+(this.props.wrapperClassName||""),inputCustomizer:e,placeholder:this.value==="auto"?"auto":""});if(!this.props.suffix||this.props.suffix==="none")return i;i.classList.add("suffix-wrapper");const n=i.querySelector("input.number-setting-input");n&&(n.style.paddingRight="35px");const s=document.createElement("span");s.className="suffix-label",s.textContent=this.props.suffix,i.appendChild(s);const a=i.querySelector("input");return a&&(a.oninput=o=>{const r=o.target.value.trim();if(r.toLowerCase()==="auto")this.value="auto";else{const u=Number(r);isNaN(u)||(this.value=u)}this.onChange&&this.onChange(this.value)}),i}}class Y extends g{constructor(t){super({title:"Margins",settings:{marginTop:new b({title:"Top",icon:K,suffix:"px",default:(t==null?void 0:t.marginTop)??"auto"}),marginRight:new b({title:"Right",icon:tt,suffix:"px",default:(t==null?void 0:t.marginRight)??0}),marginBottom:new b({title:"Bottom",icon:et,suffix:"px",default:(t==null?void 0:t.marginBottom)??0}),marginLeft:new b({title:"Left",icon:it,suffix:"px",default:(t==null?void 0:t.marginLeft)??0})}})}getCssCode(){const t=typeof this.settings.marginTop.value=="number"?`${this.settings.marginTop.value}px`:this.settings.marginTop.value,e=typeof this.settings.marginRight.value=="number"?`${this.settings.marginRight.value}px`:this.settings.marginRight.value,i=typeof this.settings.marginBottom.value=="number"?`${this.settings.marginBottom.value}px`:this.settings.marginBottom.value,n=typeof this.settings.marginLeft.value=="number"?`${this.settings.marginLeft.value}px`:this.settings.marginLeft.value;return`
|
|
90
99
|
margin-top: ${t};
|
|
91
100
|
margin-right: ${e};
|
|
92
101
|
margin-bottom: ${i};
|
|
93
102
|
margin-left: ${n};
|
|
94
|
-
`}}const
|
|
103
|
+
`}}const K=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
95
104
|
<path d="M2.25 16.25H2.2575M2.25 9.5H2.2575M2.25 12.875H2.2575M2.25 6.125H2.2575M5.625 16.25H5.6325M5.625 9.5H5.6325M12.375 16.25H12.3825M12.375 9.5H12.3825M9 16.25H9.0075M9 9.5H9.0075M9 12.875H9.0075M9 6.125H9.0075M15.75 16.25H15.7575M15.75 9.5H15.7575M15.75 12.875H15.7575M15.75 6.125H15.7575M15.75 2.75H2.25" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
96
|
-
</svg>`,
|
|
105
|
+
</svg>`,tt=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
97
106
|
<path d="M5.625 2.75H5.6325M5.625 9.5H5.6325M5.625 16.25H5.6325M12.375 2.75H12.3825M12.375 9.5H12.3825M12.375 16.25H12.3825M9 2.75H9.0075M9 9.5H9.0075M9 16.25H9.0075M9 12.875H9.0075M9 6.125H9.0075M2.25 2.75H2.2575M2.25 9.5H2.2575M2.25 16.25H2.2575M2.25 12.875H2.2575M2.25 6.125H2.2575M15.75 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
98
|
-
</svg>`,
|
|
107
|
+
</svg>`,et=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
99
108
|
<path d="M2.25 2.75H2.2575M2.25 9.5H2.2575M2.25 12.875H2.2575M2.25 6.125H2.2575M5.625 2.75H5.6325M5.625 9.5H5.6325M12.375 2.75H12.3825M12.375 9.5H12.3825M9 2.75H9.0075M9 9.5H9.0075M9 12.875H9.0075M9 6.125H9.0075M15.75 2.75H15.7575M15.75 9.5H15.7575M15.75 12.875H15.7575M15.75 6.125H15.7575M15.75 16.25H2.25" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
100
|
-
</svg>`,
|
|
109
|
+
</svg>`,it=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
101
110
|
<path d="M5.625 2.75H5.6325M5.625 9.5H5.6325M5.625 16.25H5.6325M12.375 2.75H12.3825M12.375 9.5H12.3825M12.375 16.25H12.3825M9 2.75H9.0075M9 9.5H9.0075M9 16.25H9.0075M9 12.875H9.0075M9 6.125H9.0075M15.75 2.75H15.7575M15.75 9.5H15.7575M15.75 16.25H15.7575M15.75 12.875H15.7575M15.75 6.125H15.7575M2.25 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
102
|
-
</svg>`;class
|
|
111
|
+
</svg>`;class nt extends g{constructor(t,e){super({title:`Tab ${t+1}`,settings:{name:new k({title:"Tab Name",default:`Tab ${t+1}`}),content:new k({title:"Content",default:""})}}),this.onDeleteCallback=e}draw(){const t=super.draw(),e=t.querySelector(".setting-group-arrow");e&&e.parentElement&&e.parentElement.removeChild(e);const i=t.querySelector(".setting-group-title");if(i){const n=document.createElement("div");n.className="tab-delete-container";const s=document.createElement("button");s.className="tab-delete-button",s.innerHTML=`
|
|
103
112
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#f87171" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="trash-icon">
|
|
104
113
|
<polyline points="3 6 5 6 21 6"></polyline>
|
|
105
114
|
<path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path>
|
|
@@ -107,7 +116,7 @@
|
|
|
107
116
|
<path d="M14 11v6"></path>
|
|
108
117
|
<path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"></path>
|
|
109
118
|
</svg>
|
|
110
|
-
`,s.onclick=()=>{var
|
|
119
|
+
`,s.onclick=()=>{var o;return(o=this.onDeleteCallback)==null?void 0:o.call(this)},n.appendChild(s);const a=i.querySelector("h3");a?a.insertAdjacentElement("afterend",n):i.appendChild(n)}return t}}class st extends g{constructor(){super({title:"Tabs",settings:{}}),this.tabs=[],this._el=null,this.addTab()}addTab(){const t=this.tabs.length,e=new nt(t,()=>this.removeTab(e));this.tabs.push(e),this.settings[`Tab ${t+1}`]=e}removeTab(t){const e=this.tabs.indexOf(t);e>=0&&(this.tabs.splice(e,1),delete this.settings[`Tab ${e+1}`],this.relabelTabs(),this.rerender())}relabelTabs(){this.settings={},this.tabs.forEach((t,e)=>{t.title=`Tab ${e+1}`,this.settings[`Tab ${e+1}`]=t})}draw(){const t=super.draw();this._el=t;const e=document.createElement("div");e.className="tabs-add-btn-container";const i=document.createElement("button");return i.className="tabs-add-button",i.innerHTML=`
|
|
111
120
|
<span class="add-icon">
|
|
112
121
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#667085">
|
|
113
122
|
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
|
|
@@ -120,7 +129,7 @@
|
|
|
120
129
|
</svg>
|
|
121
130
|
</span>
|
|
122
131
|
<span class="add-label">Add Tab</span>
|
|
123
|
-
`,i.onclick=()=>{this.addTab(),this.rerender()},e.appendChild(i),t.appendChild(e),t}rerender(){if(!this._el)return;const t=this._el.querySelector(".setting-group-content");t&&(t.innerHTML="",Object.keys(this.settings).forEach(e=>{const i=this.settings[e];t.appendChild(i.draw())}))}}class
|
|
132
|
+
`,i.onclick=()=>{this.addTab(),this.rerender()},e.appendChild(i),t.appendChild(e),t}rerender(){if(!this._el)return;const t=this._el.querySelector(".setting-group-content");t&&(t.innerHTML="",Object.keys(this.settings).forEach(e=>{const i=this.settings[e];t.appendChild(i.draw())}))}}class at extends g{constructor(t){super({title:"Background Image",collapsed:t==null?void 0:t.collapsed,settings:{backgroundImage:new V({...t==null?void 0:t.uploadProps,default:(t==null?void 0:t.backgroundImage)??""}),opacity:new f({default:(t==null?void 0:t.opacity)??100}),backgroundColor:new y({default:(t==null?void 0:t.backgroundColor)??"#00141E"}),opacityBG:new f({default:(t==null?void 0:t.opacityBG)??100})}})}draw(){const t=super.draw(),e=t.querySelector(".setting-group-content");if(!e)return t;const i=Array.from(e.children),[n,s,a,o]=i;e.innerHTML="",e.appendChild(n),e.appendChild(s);const r=document.createElement("div");return r.className="bgset-or-label",r.textContent="OR",e.appendChild(r),e.appendChild(a),e.appendChild(o),t}getCssCode(){const t=this.settings.backgroundImage.value||"",e=this.settings.opacity.value??100,i=this.settings.backgroundColor.value||"#00141E",n=this.settings.opacityBG.value??100;return t?`
|
|
124
133
|
background-image: url("${t}");
|
|
125
134
|
background-size: cover;
|
|
126
135
|
background-position: center;
|
|
@@ -128,4 +137,4 @@
|
|
|
128
137
|
`:`
|
|
129
138
|
background-color: ${i};
|
|
130
139
|
opacity: ${n/100};
|
|
131
|
-
`}}exports.AlignSetting=
|
|
140
|
+
`}}exports.AlignSetting=L;exports.BackgroundSettingSet=at;exports.BorderSettingSet=q;exports.ButtonSetting=O;exports.ColorSetting=y;exports.DimensionSetting=R;exports.HeaderTypographySettingSet=Q;exports.HeightSetting=_;exports.MarginSettingGroup=Y;exports.NumberSetting=C;exports.OpacitySetting=f;exports.SelectSetting=H;exports.Setting=p;exports.SettingGroup=g;exports.StringSetting=k;exports.TabsContainerGroup=st;exports.UploadSetting=V;exports.WidthSetting=Z;exports.iterateSettings=N;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
const
|
|
2
|
-
let
|
|
1
|
+
const S = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
|
|
2
|
+
let N = (l = 21) => {
|
|
3
3
|
let t = "", e = crypto.getRandomValues(new Uint8Array(l |= 0));
|
|
4
4
|
for (; l--; )
|
|
5
|
-
t +=
|
|
5
|
+
t += S[e[l] & 63];
|
|
6
6
|
return t;
|
|
7
7
|
};
|
|
8
8
|
function L(l, t) {
|
|
@@ -12,9 +12,9 @@ function L(l, t) {
|
|
|
12
12
|
t(e, i);
|
|
13
13
|
}
|
|
14
14
|
}
|
|
15
|
-
class
|
|
15
|
+
class g {
|
|
16
16
|
constructor(t) {
|
|
17
|
-
this.id = t.id ||
|
|
17
|
+
this.id = t.id || N(), this.title = t.title, this.settings = t.settings, this.isCollapsed = t.collapsed ?? !1, Object.assign(this, t.settings);
|
|
18
18
|
}
|
|
19
19
|
setOnChange(t) {
|
|
20
20
|
return this.onChange = t, L(this.settings, (e, i) => {
|
|
@@ -31,12 +31,12 @@ class C {
|
|
|
31
31
|
for (const i in this.settings)
|
|
32
32
|
if (this.settings.hasOwnProperty(i)) {
|
|
33
33
|
const n = this.settings[i];
|
|
34
|
-
n instanceof
|
|
34
|
+
n instanceof g ? e[i] = n.getValues() : e[i] = n.value;
|
|
35
35
|
}
|
|
36
36
|
return e;
|
|
37
37
|
} else {
|
|
38
38
|
const e = this.settings[t];
|
|
39
|
-
return e ? e instanceof
|
|
39
|
+
return e ? e instanceof g ? e.getValues() : e.value : void 0;
|
|
40
40
|
}
|
|
41
41
|
}
|
|
42
42
|
draw() {
|
|
@@ -48,24 +48,23 @@ class C {
|
|
|
48
48
|
i.textContent = this.title;
|
|
49
49
|
const n = document.createElement("span");
|
|
50
50
|
n.className = "setting-group-arrow", n.innerHTML = `
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
const o = t.querySelector(".setting-group-content");
|
|
56
|
-
o && (o.classList.toggle("collapsed"), n.classList.toggle("rotated"));
|
|
57
|
-
}, e.appendChild(i), e.appendChild(n);
|
|
51
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
52
|
+
<path d="M5 7.5L10 12.5L15 7.5" stroke="#344054" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
|
|
53
|
+
</svg>
|
|
54
|
+
`;
|
|
58
55
|
const s = document.createElement("div");
|
|
59
|
-
s.className = "setting-group-content"
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
56
|
+
s.className = "setting-group-content", this.isCollapsed && (s.classList.add("collapsed"), n.classList.add("rotated")), e.onclick = () => {
|
|
57
|
+
this.isCollapsed = !this.isCollapsed, s.classList.toggle("collapsed"), n.classList.toggle("rotated");
|
|
58
|
+
}, e.appendChild(i), e.appendChild(n);
|
|
59
|
+
for (const a in this.settings)
|
|
60
|
+
if (this.settings.hasOwnProperty(a)) {
|
|
61
|
+
const o = this.settings[a];
|
|
62
|
+
s.appendChild(o.draw());
|
|
64
63
|
}
|
|
65
64
|
return t.appendChild(e), t.appendChild(s), t;
|
|
66
65
|
}
|
|
67
66
|
}
|
|
68
|
-
function
|
|
67
|
+
function V(l) {
|
|
69
68
|
switch (l) {
|
|
70
69
|
case "number":
|
|
71
70
|
return 0;
|
|
@@ -83,9 +82,9 @@ function S(l) {
|
|
|
83
82
|
return "";
|
|
84
83
|
}
|
|
85
84
|
}
|
|
86
|
-
class
|
|
85
|
+
class p {
|
|
87
86
|
constructor(t = {}) {
|
|
88
|
-
this.props = t, this.id = t.id ||
|
|
87
|
+
this.props = t, this.id = t.id || N(), this.value = this.props.default, this.title = t.title || "";
|
|
89
88
|
}
|
|
90
89
|
setOnChange(t) {
|
|
91
90
|
return this.onChange = t, this;
|
|
@@ -99,22 +98,22 @@ class g {
|
|
|
99
98
|
if (e.className = t.wrapperClassName || "", t.title || t.icon) {
|
|
100
99
|
const s = document.createElement("div");
|
|
101
100
|
if (s.className = "icon-container", t.icon) {
|
|
102
|
-
const
|
|
103
|
-
s.appendChild(
|
|
101
|
+
const a = this.createIcon(t.icon, t.iconClassName);
|
|
102
|
+
s.appendChild(a);
|
|
104
103
|
}
|
|
105
104
|
if (t.title) {
|
|
106
|
-
const
|
|
107
|
-
s.appendChild(
|
|
105
|
+
const a = this.createLabel(t.title, t.labelClassName);
|
|
106
|
+
s.appendChild(a);
|
|
108
107
|
}
|
|
109
108
|
e.appendChild(s);
|
|
110
109
|
}
|
|
111
110
|
const i = document.createElement("div");
|
|
112
111
|
i.className = t.wrapperClassName || "";
|
|
113
112
|
const n = document.createElement("input");
|
|
114
|
-
return this.inputEl = n, n.value = String(t.value ||
|
|
115
|
-
const
|
|
116
|
-
let
|
|
117
|
-
t.inputType === "number" ?
|
|
113
|
+
return this.inputEl = n, n.value = String(t.value || V(t.inputType)), n.type = t.inputType, n.placeholder = t.placeholder || "", n.className = t.inputClassName || "", n.oninput = (s) => {
|
|
114
|
+
const a = s.target;
|
|
115
|
+
let o = a.value;
|
|
116
|
+
t.inputType === "number" ? o = Number(a.value) : (t.inputType === "color" || t.inputType === "date") && (o = a.value), this.value = o, this.onChange && this.onChange(this.value);
|
|
118
117
|
}, t.inputCustomizer && t.inputCustomizer(n), i.appendChild(n), e.appendChild(i), e;
|
|
119
118
|
}
|
|
120
119
|
createLabel(t, e) {
|
|
@@ -126,7 +125,7 @@ class g {
|
|
|
126
125
|
return i.className = "input-icon " + (e || ""), i.innerHTML = t, i;
|
|
127
126
|
}
|
|
128
127
|
}
|
|
129
|
-
class
|
|
128
|
+
class k extends p {
|
|
130
129
|
constructor(t = {}) {
|
|
131
130
|
super(t), this.inputType = "text";
|
|
132
131
|
}
|
|
@@ -146,12 +145,12 @@ class b extends g {
|
|
|
146
145
|
});
|
|
147
146
|
}
|
|
148
147
|
}
|
|
149
|
-
const
|
|
150
|
-
class
|
|
148
|
+
const E = "<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>";
|
|
149
|
+
class y extends k {
|
|
151
150
|
constructor(t) {
|
|
152
151
|
super({
|
|
153
152
|
...t,
|
|
154
|
-
icon: t.icon ||
|
|
153
|
+
icon: t.icon || E,
|
|
155
154
|
title: t.title || "Color"
|
|
156
155
|
}), this.inputType = "color";
|
|
157
156
|
}
|
|
@@ -160,49 +159,49 @@ class k extends b {
|
|
|
160
159
|
t.className = "color-setting-wrapper";
|
|
161
160
|
const e = document.createElement("div");
|
|
162
161
|
e.className = "icon-container";
|
|
163
|
-
const i = this.createIcon(this.props.icon ||
|
|
162
|
+
const i = this.createIcon(this.props.icon || E), n = this.createLabel(this.title || "Color");
|
|
164
163
|
e.appendChild(i), e.appendChild(n);
|
|
165
164
|
const s = document.createElement("div");
|
|
166
165
|
s.className = "color-input-wrapper";
|
|
167
|
-
const
|
|
166
|
+
const a = /^([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/, o = (d) => {
|
|
168
167
|
const c = d.value.startsWith("#") ? d.value.slice(1) : d.value;
|
|
169
|
-
return
|
|
168
|
+
return a.test(c) ? (d.style.border = "", !0) : (d.style.border = "1px solid red", !1);
|
|
170
169
|
}, r = document.createElement("div");
|
|
171
170
|
r.className = "color-preview", r.style.backgroundColor = this.value || "";
|
|
172
|
-
const
|
|
171
|
+
const u = this.createInput({
|
|
173
172
|
value: this.value,
|
|
174
173
|
inputType: "text",
|
|
175
174
|
inputClassName: "color-text-input"
|
|
176
|
-
}),
|
|
175
|
+
}), h = u.querySelector(
|
|
177
176
|
"input"
|
|
178
|
-
),
|
|
177
|
+
), f = this.createInput({
|
|
179
178
|
value: this.value,
|
|
180
179
|
inputType: this.inputType,
|
|
181
180
|
inputClassName: "color-picker"
|
|
182
|
-
}),
|
|
181
|
+
}), m = f.querySelector(
|
|
183
182
|
"input"
|
|
184
183
|
);
|
|
185
|
-
return
|
|
186
|
-
var
|
|
184
|
+
return h.oninput = (d) => {
|
|
185
|
+
var v;
|
|
187
186
|
let c = d.target.value.trim();
|
|
188
|
-
c.charAt(0) !== "#" && (c = "#" + c,
|
|
189
|
-
},
|
|
190
|
-
var
|
|
187
|
+
c.charAt(0) !== "#" && (c = "#" + c, h.value = c), o(h) && (this.value = c, (v = this.onChange) == null || v.call(this, c), m.value = c, r.style.backgroundColor = c);
|
|
188
|
+
}, m.oninput = (d) => {
|
|
189
|
+
var v;
|
|
191
190
|
let c = d.target.value;
|
|
192
|
-
c.charAt(0) !== "#" && (c = "#" + c,
|
|
193
|
-
}, s.appendChild(r), s.appendChild(
|
|
191
|
+
c.charAt(0) !== "#" && (c = "#" + c, m.value = c), this.value = c, (v = this.onChange) == null || v.call(this, c), h.value = c, r.style.backgroundColor = c, o(h);
|
|
192
|
+
}, s.appendChild(r), s.appendChild(f), s.appendChild(u), t.appendChild(e), t.appendChild(s), t;
|
|
194
193
|
}
|
|
195
194
|
}
|
|
196
|
-
class
|
|
195
|
+
class C extends p {
|
|
197
196
|
constructor(t = {}) {
|
|
198
197
|
super(t), this.inputType = "number";
|
|
199
198
|
}
|
|
200
199
|
draw() {
|
|
201
200
|
const t = (s) => {
|
|
202
201
|
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", () => {
|
|
203
|
-
const
|
|
202
|
+
const a = this.props.minValue ?? Number.MIN_SAFE_INTEGER, o = this.props.maxValue ?? Number.MAX_SAFE_INTEGER;
|
|
204
203
|
let r = Number(s.value);
|
|
205
|
-
r <
|
|
204
|
+
r < a && (r = a), r > o && (r = o), s.value = String(r);
|
|
206
205
|
});
|
|
207
206
|
}, e = this.createInput({
|
|
208
207
|
value: this.value,
|
|
@@ -224,18 +223,18 @@ class m extends g {
|
|
|
224
223
|
return n.className = "suffix-label", n.textContent = this.props.suffix, e.appendChild(n), e;
|
|
225
224
|
}
|
|
226
225
|
}
|
|
227
|
-
class
|
|
226
|
+
class b extends C {
|
|
228
227
|
constructor(t) {
|
|
229
228
|
super({
|
|
230
229
|
...t,
|
|
231
230
|
minValue: 0,
|
|
232
231
|
maxValue: 100,
|
|
233
|
-
icon: t.icon ||
|
|
232
|
+
icon: t.icon || T,
|
|
234
233
|
title: t.title || "Opacity"
|
|
235
234
|
}), this.inputType = "number";
|
|
236
235
|
}
|
|
237
236
|
}
|
|
238
|
-
const
|
|
237
|
+
const T = `
|
|
239
238
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
240
239
|
<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
240
|
<path d="M9.00014 17.5623C6.84764 17.5623 4.82266 16.7223 3.30016 15.1998C3.19516 15.0948 3.13513 14.9523 3.13513 14.8023C3.13513 14.6523 3.19516 14.5098 3.30016 14.4048L13.9051 3.79984C14.1226 3.58234 14.4826 3.58234 14.7001 3.79984C16.2226 5.32234 17.0626 7.34734 17.0626 9.49984C17.0626 13.9473 13.4476 17.5623 9.00014 17.5623ZM4.50764 14.7873C5.76014 15.8523 7.33514 16.4373 9.00014 16.4373C12.8251 16.4373 15.9376 13.3248 15.9376 9.49984C15.9376 7.83484 15.3526 6.25984 14.2876 5.00734L4.50764 14.7873Z" fill="#667085"/>
|
|
@@ -244,7 +243,7 @@ const V = `
|
|
|
244
243
|
<path d="M15.84 12.6648C15.6975 12.6648 15.555 12.6123 15.4425 12.4998L10.725 7.78234C10.5075 7.56484 10.5075 7.20484 10.725 6.98734C10.9425 6.76984 11.3025 6.76984 11.52 6.98734L16.2375 11.7048C16.455 11.9223 16.455 12.2823 16.2375 12.4998C16.1325 12.6048 15.99 12.6648 15.84 12.6648Z" fill="#667085"/>
|
|
245
244
|
</svg>
|
|
246
245
|
`;
|
|
247
|
-
class
|
|
246
|
+
class H extends p {
|
|
248
247
|
constructor(t = {}) {
|
|
249
248
|
super(t), this.inputType = "select", this._options = [], t.options && (this._options = [...t.options]), t.getOptions && this._options.push(...t.getOptions()), t.getOptionsAsync && t.getOptionsAsync().then((e) => {
|
|
250
249
|
this._options.push(...e), this.selectNode && e.forEach((i, n) => {
|
|
@@ -282,13 +281,13 @@ class y extends g {
|
|
|
282
281
|
i >= 0 && (e.value = String(i));
|
|
283
282
|
}
|
|
284
283
|
return e.onchange = (i) => {
|
|
285
|
-
var
|
|
284
|
+
var a;
|
|
286
285
|
const n = Number(i.target.value), s = this._options[n];
|
|
287
|
-
s && (this.value = s.value, (
|
|
286
|
+
s && (this.value = s.value, (a = this.onChange) == null || a.call(this, this.value));
|
|
288
287
|
}, t.appendChild(e), t;
|
|
289
288
|
}
|
|
290
289
|
}
|
|
291
|
-
class
|
|
290
|
+
class I extends p {
|
|
292
291
|
constructor(t = {}) {
|
|
293
292
|
super(t), this.inputType = "button", this.value || (this.value = "center");
|
|
294
293
|
}
|
|
@@ -333,15 +332,15 @@ class T extends g {
|
|
|
333
332
|
`
|
|
334
333
|
}
|
|
335
334
|
].forEach((s) => {
|
|
336
|
-
const
|
|
337
|
-
|
|
338
|
-
var
|
|
339
|
-
i.querySelectorAll(".align-option-button").forEach((r) => r.classList.remove("selected")),
|
|
340
|
-
}), i.appendChild(
|
|
335
|
+
const a = document.createElement("button");
|
|
336
|
+
a.className = "align-option-button", a.innerHTML = s.icon, this.value === s.name && a.classList.add("selected"), a.addEventListener("click", () => {
|
|
337
|
+
var o;
|
|
338
|
+
i.querySelectorAll(".align-option-button").forEach((r) => r.classList.remove("selected")), a.classList.add("selected"), this.value = s.name, (o = this.onChange) == null || o.call(this, this.value);
|
|
339
|
+
}), i.appendChild(a);
|
|
341
340
|
}), t.appendChild(i), t;
|
|
342
341
|
}
|
|
343
342
|
}
|
|
344
|
-
class
|
|
343
|
+
class Q extends p {
|
|
345
344
|
constructor(t) {
|
|
346
345
|
super(t), this.inputType = "button";
|
|
347
346
|
}
|
|
@@ -354,24 +353,24 @@ class P extends g {
|
|
|
354
353
|
return e.className = "button-setting-wrapper " + (this.props.wrapperClassName || ""), e.appendChild(t), e;
|
|
355
354
|
}
|
|
356
355
|
}
|
|
357
|
-
class
|
|
356
|
+
class Y extends p {
|
|
358
357
|
constructor(t = {}) {
|
|
359
|
-
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
|
|
358
|
+
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 C({
|
|
360
359
|
title: "Width",
|
|
361
360
|
default: this.value.width,
|
|
362
361
|
suffix: "px",
|
|
363
362
|
// Display "px" as the unit.
|
|
364
363
|
minValue: t.minWidth ?? 1,
|
|
365
364
|
maxValue: t.maxWidth,
|
|
366
|
-
icon:
|
|
365
|
+
icon: B
|
|
367
366
|
// SVG icon defined at the bottom.
|
|
368
|
-
}), this.heightSetting = new
|
|
367
|
+
}), this.heightSetting = new C({
|
|
369
368
|
title: "Height",
|
|
370
369
|
default: this.value.height,
|
|
371
370
|
suffix: "px",
|
|
372
371
|
minValue: t.minHeight ?? 1,
|
|
373
372
|
maxValue: t.maxHeight,
|
|
374
|
-
icon:
|
|
373
|
+
icon: O
|
|
375
374
|
}), this.widthSetting.setOnChange((e) => {
|
|
376
375
|
var s;
|
|
377
376
|
if (this.isUpdating || isNaN(e) || e < 1) return;
|
|
@@ -427,70 +426,85 @@ class X extends g {
|
|
|
427
426
|
return s.className = "dimension-lock-icon", s.innerHTML = this.getLockSVG(this.locked), s.onclick = () => this.toggleLock(s), n.appendChild(s), t.appendChild(e), t.appendChild(n), t.appendChild(i), t;
|
|
428
427
|
}
|
|
429
428
|
}
|
|
430
|
-
const
|
|
429
|
+
const B = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
431
430
|
<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"/>
|
|
432
|
-
</svg>`,
|
|
431
|
+
</svg>`, O = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
433
432
|
<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"/>
|
|
434
|
-
</svg>`,
|
|
433
|
+
</svg>`, R = `
|
|
435
434
|
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" viewBox="0 0 15 16" fill="none">
|
|
436
435
|
<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"/>
|
|
437
436
|
</svg>
|
|
437
|
+
`, j = `
|
|
438
|
+
<svg width="91" height="71" viewBox="0 0 91 71" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
439
|
+
<rect width="91" height="71" rx="4" fill="#F2F4F7"/>
|
|
440
|
+
<path d="M37 31.5L39.5 29M39.5 29L42 31.5M39.5 29V34.625M44.5 31.9643C45.2634 31.3338 45.75 30.38 45.75 29.3125C45.75 27.414 44.211 25.875 42.3125 25.875C42.1759 25.875 42.0482 25.8037 41.9788 25.6861C41.1638 24.303 39.659 23.375 37.9375 23.375C35.3487 23.375 33.25 25.4737 33.25 28.0625C33.25 29.3538 33.7721 30.5232 34.6168 31.371" stroke="#475467" stroke-linecap="round" stroke-linejoin="round"/>
|
|
441
|
+
</svg>
|
|
442
|
+
`, $ = `
|
|
443
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 12 12" fill="none">
|
|
444
|
+
<path d="M8 3V2.6C8 2.03995 8 1.75992 7.89101 1.54601C7.79513 1.35785 7.64215 1.20487 7.45399 1.10899C7.24008 1 6.96005 1 6.4 1H5.6C5.03995 1 4.75992 1 4.54601 1.10899C4.35785 1.20487 4.20487 1.35785 4.10899 1.54601C4 1.75992 4 2.03995 4 2.6V3M5 5.75V8.25M7 5.75V8.25M1.5 3H10.5M9.5 3V8.6C9.5 9.44008 9.5 9.86012 9.33651 10.181C9.1927 10.4632 8.96323 10.6927 8.68099 10.8365C8.36012 11 7.94008 11 7.1 11H4.9C4.05992 11 3.63988 11 3.31901 10.8365C3.03677 10.6927 2.8073 10.4632 2.66349 10.181C2.5 9.86012 2.5 9.44008 2.5 8.6V3" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
445
|
+
</svg>
|
|
438
446
|
`;
|
|
439
|
-
class
|
|
447
|
+
class W extends p {
|
|
440
448
|
constructor(t = {}) {
|
|
441
|
-
super(t), this.inputType = "button", !this.value && t.defaultUrl && (this.value = t.defaultUrl);
|
|
449
|
+
super(t), this.inputType = "button", this.previewWrapper = null, this.previewEl = null, this.emptyStateEl = null, !this.value && t.defaultUrl && t.defaultUrl !== "" && (this.value = t.defaultUrl);
|
|
450
|
+
}
|
|
451
|
+
updatePreviewState(t = null) {
|
|
452
|
+
!this.previewWrapper || !this.previewEl || !this.emptyStateEl || (t && t !== "" ? (this.previewEl.style.display = "block", this.emptyStateEl.style.display = "none", this.previewEl.src = t, this.previewWrapper.classList.add("has-image")) : (this.previewEl.style.display = "none", this.emptyStateEl.style.display = "block", this.previewEl.src = "", this.previewWrapper.classList.remove("has-image")));
|
|
442
453
|
}
|
|
443
454
|
draw() {
|
|
444
455
|
const t = document.createElement("div");
|
|
445
|
-
t.className = "upload-setting-wrapper";
|
|
446
|
-
const e = document.createElement("img");
|
|
447
|
-
e.className = "upload-preview", e.src = this.value || this.props.defaultUrl || "";
|
|
456
|
+
t.className = "upload-setting-wrapper", this.previewWrapper = document.createElement("div"), this.previewWrapper.className = "preview-wrapper", this.emptyStateEl = document.createElement("div"), this.emptyStateEl.className = "empty-state", this.emptyStateEl.innerHTML = j, this.previewEl = document.createElement("img"), this.previewEl.className = "upload-preview", this.value && this.value !== "" ? this.updatePreviewState(this.value) : this.updatePreviewState(null);
|
|
448
457
|
const i = document.createElement("button");
|
|
449
|
-
i.className = "
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
const n = document.createElement("
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
458
|
+
i.className = "delete-button", i.type = "button", i.title = "Delete image", i.innerHTML = $, i.onclick = (a) => {
|
|
459
|
+
var o;
|
|
460
|
+
a.stopPropagation(), this.value = "", this.updatePreviewState(null), (o = this.onChange) == null || o.call(this, "");
|
|
461
|
+
}, this.previewWrapper.appendChild(this.emptyStateEl), this.previewWrapper.appendChild(this.previewEl), this.previewWrapper.appendChild(i);
|
|
462
|
+
const n = document.createElement("button");
|
|
463
|
+
n.className = "upload-button", n.innerHTML = `
|
|
464
|
+
<span class="upload-icon">${R}</span>
|
|
465
|
+
<span class="upload-label">Upload</span>
|
|
466
|
+
`;
|
|
467
|
+
const s = document.createElement("input");
|
|
468
|
+
return s.type = "file", s.accept = "image/*", s.style.display = "none", n.onclick = () => {
|
|
469
|
+
s.click();
|
|
470
|
+
}, s.onchange = async () => {
|
|
471
|
+
var o, r, u;
|
|
472
|
+
const a = (o = s.files) == null ? void 0 : o[0];
|
|
473
|
+
if (a)
|
|
460
474
|
try {
|
|
461
|
-
const h = new FormData(),
|
|
462
|
-
h.append(
|
|
463
|
-
const
|
|
464
|
-
if (!
|
|
475
|
+
const h = new FormData(), f = this.props.formFieldName || "file";
|
|
476
|
+
h.append(f, a, a.name);
|
|
477
|
+
const m = this.props.uploadUrl;
|
|
478
|
+
if (!m)
|
|
465
479
|
throw new Error("No uploadUrl provided to UploadSetting.");
|
|
466
|
-
const
|
|
467
|
-
method:
|
|
480
|
+
const d = this.props.requestMethod || "POST", c = { ...this.props.requestHeaders || {} }, M = await (await fetch(m, {
|
|
481
|
+
method: d,
|
|
468
482
|
body: h,
|
|
469
|
-
headers:
|
|
483
|
+
headers: c
|
|
470
484
|
})).json();
|
|
471
|
-
let
|
|
485
|
+
let w;
|
|
472
486
|
if (this.props.parseResponse)
|
|
473
|
-
|
|
474
|
-
else if (
|
|
487
|
+
w = this.props.parseResponse(M);
|
|
488
|
+
else if (w = (r = M == null ? void 0 : M.data) == null ? void 0 : r.url, !w)
|
|
475
489
|
throw new Error(
|
|
476
490
|
"No URL found in response. Provide a parseResponse if needed."
|
|
477
491
|
);
|
|
478
|
-
this.value =
|
|
492
|
+
this.value = w, this.updatePreviewState(w), (u = this.onChange) == null || u.call(this, w);
|
|
479
493
|
} catch (h) {
|
|
480
|
-
console.error("Error uploading file:", h);
|
|
494
|
+
console.error("Error uploading file:", h), this.updatePreviewState(null);
|
|
481
495
|
}
|
|
482
|
-
}, t.appendChild(
|
|
496
|
+
}, t.appendChild(this.previewWrapper), t.appendChild(n), t.appendChild(s), t;
|
|
483
497
|
}
|
|
484
498
|
}
|
|
485
|
-
class
|
|
499
|
+
class K extends p {
|
|
486
500
|
constructor(t = {}) {
|
|
487
|
-
super(t), this.inputType = "number", this.value = this.value ?? 100, this.numberSetting = new
|
|
501
|
+
super(t), this.inputType = "number", this.value = this.value ?? 100, this.numberSetting = new C({
|
|
488
502
|
title: "Height",
|
|
489
503
|
default: this.value,
|
|
490
504
|
suffix: "px",
|
|
491
505
|
minValue: t.minHeight ?? 1,
|
|
492
506
|
maxValue: t.maxHeight,
|
|
493
|
-
icon:
|
|
507
|
+
icon: A
|
|
494
508
|
}), this.numberSetting.setOnChange((e) => {
|
|
495
509
|
var i;
|
|
496
510
|
isNaN(e) || e < 1 || (this.value = e, (i = this.onChange) == null || i.call(this, this.value));
|
|
@@ -500,18 +514,18 @@ class J extends g {
|
|
|
500
514
|
return this.numberSetting.draw();
|
|
501
515
|
}
|
|
502
516
|
}
|
|
503
|
-
const
|
|
517
|
+
const A = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
504
518
|
<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"/>
|
|
505
519
|
</svg>`;
|
|
506
|
-
class
|
|
520
|
+
class tt extends p {
|
|
507
521
|
constructor(t = {}) {
|
|
508
|
-
super(t), this.inputType = "number", this.value = this.value ?? 100, this.numberSetting = new
|
|
522
|
+
super(t), this.inputType = "number", this.value = this.value ?? 100, this.numberSetting = new C({
|
|
509
523
|
title: "Width",
|
|
510
524
|
default: this.value,
|
|
511
525
|
suffix: "px",
|
|
512
526
|
minValue: t.minWidth ?? 1,
|
|
513
527
|
maxValue: t.maxWidth,
|
|
514
|
-
icon:
|
|
528
|
+
icon: _
|
|
515
529
|
}), this.numberSetting.setOnChange((e) => {
|
|
516
530
|
var i;
|
|
517
531
|
isNaN(e) || e < 1 || (this.value = e, (i = this.onChange) == null || i.call(this, this.value));
|
|
@@ -521,39 +535,40 @@ class Q extends g {
|
|
|
521
535
|
return this.numberSetting.draw();
|
|
522
536
|
}
|
|
523
537
|
}
|
|
524
|
-
const
|
|
538
|
+
const _ = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
525
539
|
<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"/>
|
|
526
|
-
</svg>`,
|
|
540
|
+
</svg>`, F = `
|
|
527
541
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
528
542
|
<path d="M5.625 9.5H5.6325M12.375 9.5H12.3825M9 9.5H9.0075M9 12.875H9.0075M9 6.125H9.0075M2.25 6.35L2.25 12.65C2.25 13.9101 2.25 14.5402 2.49524 15.0215C2.71095 15.4448 3.05516 15.789 3.47852 16.0048C3.95982 16.25 4.58988 16.25 5.85 16.25H12.15C13.4101 16.25 14.0402 16.25 14.5215 16.0048C14.9448 15.789 15.289 15.4448 15.5048 15.0215C15.75 14.5402 15.75 13.9101 15.75 12.65V6.35C15.75 5.08988 15.75 4.45982 15.5048 3.97852C15.289 3.55516 14.9448 3.21095 14.5215 2.99524C14.0402 2.75 13.4101 2.75 12.15 2.75L5.85 2.75C4.58988 2.75 3.95982 2.75 3.47852 2.99524C3.05516 3.21095 2.71095 3.55516 2.49524 3.97852C2.25 4.45982 2.25 5.08988 2.25 6.35Z" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
529
543
|
</svg>
|
|
530
|
-
`,
|
|
544
|
+
`, G = `
|
|
531
545
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
532
546
|
<path d="M6 2.75H5.85C4.58988 2.75 3.95982 2.75 3.47852 2.99524C3.05516 3.21095 2.71095 3.55516 2.49524 3.97852C2.25 4.45982 2.25 5.08988 2.25 6.35V6.5M6 16.25H5.85C4.58988 16.25 3.95982 16.25 3.47852 16.0048C3.05516 15.789 2.71095 15.4448 2.49524 15.0215C2.25 14.5402 2.25 13.9101 2.25 12.65V12.5M15.75 6.5V6.35C15.75 5.08988 15.75 4.45982 15.5048 3.97852C15.289 3.55516 14.9448 3.21095 14.5215 2.99524C14.0402 2.75 13.4101 2.75 12.15 2.75H12M15.75 12.5V12.65C15.75 13.9101 15.75 14.5402 15.5048 15.0215C15.289 15.4448 14.9448 15.789 14.5215 16.0048C14.0402 16.25 13.4101 16.25 12.15 16.25H12" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
533
547
|
</svg>
|
|
534
548
|
`;
|
|
535
|
-
class
|
|
549
|
+
class et extends g {
|
|
536
550
|
constructor(t) {
|
|
537
551
|
super({
|
|
538
552
|
title: "Border",
|
|
553
|
+
collapsed: t == null ? void 0 : t.collapsed,
|
|
539
554
|
settings: {
|
|
540
|
-
color: new
|
|
555
|
+
color: new y({
|
|
541
556
|
default: (t == null ? void 0 : t.color) ?? "#00141E"
|
|
542
557
|
}),
|
|
543
|
-
opacity: new
|
|
558
|
+
opacity: new b({
|
|
544
559
|
default: (t == null ? void 0 : t.opacity) ?? 100,
|
|
545
560
|
minValue: 0,
|
|
546
561
|
maxValue: 100
|
|
547
562
|
}),
|
|
548
|
-
radius: new
|
|
563
|
+
radius: new C({
|
|
549
564
|
title: "Radius",
|
|
550
|
-
icon:
|
|
565
|
+
icon: F,
|
|
551
566
|
default: (t == null ? void 0 : t.radius) ?? 12,
|
|
552
567
|
suffix: "px"
|
|
553
568
|
}),
|
|
554
|
-
size: new
|
|
569
|
+
size: new C({
|
|
555
570
|
title: "Size",
|
|
556
|
-
icon:
|
|
571
|
+
icon: G,
|
|
557
572
|
default: (t == null ? void 0 : t.size) ?? 0,
|
|
558
573
|
suffix: "px"
|
|
559
574
|
})
|
|
@@ -573,33 +588,34 @@ class Y extends C {
|
|
|
573
588
|
`;
|
|
574
589
|
}
|
|
575
590
|
}
|
|
576
|
-
const
|
|
591
|
+
const Z = `
|
|
577
592
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="13" viewBox="0 0 14 13" fill="none">
|
|
578
593
|
<path d="M1 2.75C1 2.05109 1 1.70163 1.11418 1.42597C1.26642 1.05843 1.55843 0.766422 1.92597 0.614181C2.20163 0.5 2.55109 0.5 3.25 0.5H10.75C11.4489 0.5 11.7984 0.5 12.074 0.614181C12.4416 0.766422 12.7336 1.05843 12.8858 1.42597C13 1.70163 13 2.05109 13 2.75M4.75 12.5H9.25M7 0.5V12.5" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
579
594
|
</svg>
|
|
580
|
-
`,
|
|
595
|
+
`, z = `
|
|
581
596
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
582
597
|
<path d="M3 5.75C3 5.05109 3 4.70163 3.11418 4.42597C3.26642 4.05843 3.55843 3.76642 3.92597 3.61418C4.20163 3.5 4.55109 3.5 5.25 3.5H12.75C13.4489 3.5 13.7984 3.5 14.074 3.61418C14.4416 3.76642 14.7336 4.05843 14.8858 4.42597C15 4.70163 15 5.05109 15 5.75M6 15.5H12M7.6875 3.5V15.5M10.3125 3.5V15.5" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
583
598
|
</svg>
|
|
584
|
-
`,
|
|
599
|
+
`, U = `
|
|
585
600
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
586
601
|
<path d="M6 5.75H12M9 5.75V13.25M5.85 16.25H12.15C13.4101 16.25 14.0402 16.25 14.5215 16.0048C14.9448 15.789 15.289 15.4448 15.5048 15.0215C15.75 14.5402 15.75 13.9101 15.75 12.65V6.35C15.75 5.08988 15.75 4.45982 15.5048 3.97852C15.289 3.55516 14.9448 3.21095 14.5215 2.99524C14.0402 2.75 13.4101 2.75 12.15 2.75H5.85C4.58988 2.75 3.95982 2.75 3.47852 2.99524C3.05516 3.21095 2.71095 3.55516 2.49524 3.97852C2.25 4.45982 2.25 5.08988 2.25 6.35V12.65C2.25 13.9101 2.25 14.5402 2.49524 15.0215C2.71095 15.4448 3.05516 15.789 3.47852 16.0048C3.95982 16.25 4.58988 16.25 5.85 16.25Z" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
587
602
|
</svg>
|
|
588
603
|
`;
|
|
589
|
-
class
|
|
604
|
+
class it extends g {
|
|
590
605
|
constructor(t = {}) {
|
|
591
606
|
super({
|
|
592
607
|
title: t.title || "Typography",
|
|
608
|
+
collapsed: t.collapsed,
|
|
593
609
|
settings: {
|
|
594
|
-
color: new
|
|
610
|
+
color: new y({
|
|
595
611
|
default: t.colorDefault ?? "#00141E"
|
|
596
612
|
}),
|
|
597
|
-
opacity: new
|
|
613
|
+
opacity: new b({
|
|
598
614
|
default: t.colorOpacityDefault ?? 100
|
|
599
615
|
}),
|
|
600
|
-
fontFamily: new
|
|
616
|
+
fontFamily: new H({
|
|
601
617
|
title: "Font",
|
|
602
|
-
icon:
|
|
618
|
+
icon: Z,
|
|
603
619
|
default: t.fontFamilyDefault ?? "Satoshi",
|
|
604
620
|
options: t.fontFamilyOptions ?? [
|
|
605
621
|
{ name: "Satoshi", value: "Satoshi" },
|
|
@@ -609,9 +625,9 @@ class K extends C {
|
|
|
609
625
|
getOptions: t.fontFamilyGetOptions,
|
|
610
626
|
getOptionsAsync: t.fontFamilyGetOptionsAsync
|
|
611
627
|
}),
|
|
612
|
-
fontWeight: new
|
|
628
|
+
fontWeight: new H({
|
|
613
629
|
title: "Weight",
|
|
614
|
-
icon:
|
|
630
|
+
icon: z,
|
|
615
631
|
default: t.fontWeightDefault ?? "bold",
|
|
616
632
|
options: t.fontWeightOptions ?? [
|
|
617
633
|
{ name: "Regular", value: "regular" },
|
|
@@ -621,13 +637,13 @@ class K extends C {
|
|
|
621
637
|
getOptions: t.fontWeightGetOptions,
|
|
622
638
|
getOptionsAsync: t.fontWeightGetOptionsAsync
|
|
623
639
|
}),
|
|
624
|
-
fontSize: new
|
|
640
|
+
fontSize: new C({
|
|
625
641
|
title: "Size",
|
|
626
|
-
icon:
|
|
642
|
+
icon: U,
|
|
627
643
|
default: t.fontSizeDefault ?? 12,
|
|
628
644
|
suffix: "px"
|
|
629
645
|
}),
|
|
630
|
-
align: new
|
|
646
|
+
align: new I({
|
|
631
647
|
title: "Align",
|
|
632
648
|
default: t.alignDefault ?? "center"
|
|
633
649
|
})
|
|
@@ -635,18 +651,18 @@ class K extends C {
|
|
|
635
651
|
});
|
|
636
652
|
}
|
|
637
653
|
getCssCode() {
|
|
638
|
-
const t = this.settings.color.value ?? "#000000", e = this.settings.opacity.value ?? 100, i = this.settings.fontFamily.value ?? "Satoshi", n = this.settings.fontWeight.value ?? "bold", s = this.settings.fontSize.value ?? 12,
|
|
654
|
+
const t = this.settings.color.value ?? "#000000", e = this.settings.opacity.value ?? 100, i = this.settings.fontFamily.value ?? "Satoshi", n = this.settings.fontWeight.value ?? "bold", s = this.settings.fontSize.value ?? 12, a = this.settings.align.value ?? "left";
|
|
639
655
|
return `
|
|
640
656
|
color: ${t};
|
|
641
657
|
opacity: ${e / 100};
|
|
642
658
|
font-family: ${i};
|
|
643
659
|
font-weight: ${n};
|
|
644
660
|
font-size: ${s}px;
|
|
645
|
-
text-align: ${
|
|
661
|
+
text-align: ${a};
|
|
646
662
|
`;
|
|
647
663
|
}
|
|
648
664
|
}
|
|
649
|
-
class
|
|
665
|
+
class x extends p {
|
|
650
666
|
constructor(t) {
|
|
651
667
|
super({
|
|
652
668
|
...t,
|
|
@@ -654,11 +670,11 @@ class M extends g {
|
|
|
654
670
|
}), this.inputType = "number", this.value = t.default !== void 0 ? t.default : "auto";
|
|
655
671
|
}
|
|
656
672
|
draw() {
|
|
657
|
-
const t = this.value === "auto" ? "text" : "number", e = (
|
|
658
|
-
this.value !== "auto" && (this.props.minValue !== void 0 && (
|
|
659
|
-
const r = this.props.minValue ?? Number.MIN_SAFE_INTEGER,
|
|
660
|
-
let
|
|
661
|
-
|
|
673
|
+
const t = this.value === "auto" ? "text" : "number", e = (o) => {
|
|
674
|
+
this.value !== "auto" && (this.props.minValue !== void 0 && (o.min = String(this.props.minValue)), this.props.maxValue !== void 0 && (o.max = String(this.props.maxValue)), this.props.className && o.classList.add(this.props.className), o.addEventListener("input", () => {
|
|
675
|
+
const r = this.props.minValue ?? Number.MIN_SAFE_INTEGER, u = this.props.maxValue ?? Number.MAX_SAFE_INTEGER;
|
|
676
|
+
let h = Number(o.value);
|
|
677
|
+
h < r && (h = r), h > u && (h = u), o.value = String(h);
|
|
662
678
|
}));
|
|
663
679
|
}, i = this.createInput({
|
|
664
680
|
value: this.value,
|
|
@@ -679,45 +695,45 @@ class M extends g {
|
|
|
679
695
|
n && (n.style.paddingRight = "35px");
|
|
680
696
|
const s = document.createElement("span");
|
|
681
697
|
s.className = "suffix-label", s.textContent = this.props.suffix, i.appendChild(s);
|
|
682
|
-
const
|
|
683
|
-
return
|
|
684
|
-
const r =
|
|
698
|
+
const a = i.querySelector("input");
|
|
699
|
+
return a && (a.oninput = (o) => {
|
|
700
|
+
const r = o.target.value.trim();
|
|
685
701
|
if (r.toLowerCase() === "auto")
|
|
686
702
|
this.value = "auto";
|
|
687
703
|
else {
|
|
688
|
-
const
|
|
689
|
-
isNaN(
|
|
704
|
+
const u = Number(r);
|
|
705
|
+
isNaN(u) || (this.value = u);
|
|
690
706
|
}
|
|
691
707
|
this.onChange && this.onChange(this.value);
|
|
692
708
|
}), i;
|
|
693
709
|
}
|
|
694
710
|
}
|
|
695
|
-
class
|
|
711
|
+
class nt extends g {
|
|
696
712
|
constructor(t) {
|
|
697
713
|
super({
|
|
698
714
|
title: "Margins",
|
|
699
715
|
settings: {
|
|
700
|
-
marginTop: new
|
|
716
|
+
marginTop: new x({
|
|
701
717
|
title: "Top",
|
|
702
|
-
icon:
|
|
718
|
+
icon: D,
|
|
703
719
|
suffix: "px",
|
|
704
720
|
default: (t == null ? void 0 : t.marginTop) ?? "auto"
|
|
705
721
|
}),
|
|
706
|
-
marginRight: new
|
|
722
|
+
marginRight: new x({
|
|
707
723
|
title: "Right",
|
|
708
|
-
icon:
|
|
724
|
+
icon: q,
|
|
709
725
|
suffix: "px",
|
|
710
726
|
default: (t == null ? void 0 : t.marginRight) ?? 0
|
|
711
727
|
}),
|
|
712
|
-
marginBottom: new
|
|
728
|
+
marginBottom: new x({
|
|
713
729
|
title: "Bottom",
|
|
714
|
-
icon:
|
|
730
|
+
icon: P,
|
|
715
731
|
suffix: "px",
|
|
716
732
|
default: (t == null ? void 0 : t.marginBottom) ?? 0
|
|
717
733
|
}),
|
|
718
|
-
marginLeft: new
|
|
734
|
+
marginLeft: new x({
|
|
719
735
|
title: "Left",
|
|
720
|
-
icon:
|
|
736
|
+
icon: X,
|
|
721
737
|
suffix: "px",
|
|
722
738
|
default: (t == null ? void 0 : t.marginLeft) ?? 0
|
|
723
739
|
})
|
|
@@ -734,25 +750,25 @@ class tt extends C {
|
|
|
734
750
|
`;
|
|
735
751
|
}
|
|
736
752
|
}
|
|
737
|
-
const
|
|
753
|
+
const D = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
738
754
|
<path d="M2.25 16.25H2.2575M2.25 9.5H2.2575M2.25 12.875H2.2575M2.25 6.125H2.2575M5.625 16.25H5.6325M5.625 9.5H5.6325M12.375 16.25H12.3825M12.375 9.5H12.3825M9 16.25H9.0075M9 9.5H9.0075M9 12.875H9.0075M9 6.125H9.0075M15.75 16.25H15.7575M15.75 9.5H15.7575M15.75 12.875H15.7575M15.75 6.125H15.7575M15.75 2.75H2.25" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
739
|
-
</svg>`,
|
|
755
|
+
</svg>`, q = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
740
756
|
<path d="M5.625 2.75H5.6325M5.625 9.5H5.6325M5.625 16.25H5.6325M12.375 2.75H12.3825M12.375 9.5H12.3825M12.375 16.25H12.3825M9 2.75H9.0075M9 9.5H9.0075M9 16.25H9.0075M9 12.875H9.0075M9 6.125H9.0075M2.25 2.75H2.2575M2.25 9.5H2.2575M2.25 16.25H2.2575M2.25 12.875H2.2575M2.25 6.125H2.2575M15.75 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
741
|
-
</svg>`,
|
|
757
|
+
</svg>`, P = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
742
758
|
<path d="M2.25 2.75H2.2575M2.25 9.5H2.2575M2.25 12.875H2.2575M2.25 6.125H2.2575M5.625 2.75H5.6325M5.625 9.5H5.6325M12.375 2.75H12.3825M12.375 9.5H12.3825M9 2.75H9.0075M9 9.5H9.0075M9 12.875H9.0075M9 6.125H9.0075M15.75 2.75H15.7575M15.75 9.5H15.7575M15.75 12.875H15.7575M15.75 6.125H15.7575M15.75 16.25H2.25" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
743
|
-
</svg>`,
|
|
759
|
+
</svg>`, X = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
744
760
|
<path d="M5.625 2.75H5.6325M5.625 9.5H5.6325M5.625 16.25H5.6325M12.375 2.75H12.3825M12.375 9.5H12.3825M12.375 16.25H12.3825M9 2.75H9.0075M9 9.5H9.0075M9 16.25H9.0075M9 12.875H9.0075M9 6.125H9.0075M15.75 2.75H15.7575M15.75 9.5H15.7575M15.75 16.25H15.7575M15.75 12.875H15.7575M15.75 6.125H15.7575M2.25 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
745
761
|
</svg>`;
|
|
746
|
-
class
|
|
762
|
+
class J extends g {
|
|
747
763
|
constructor(t, e) {
|
|
748
764
|
super({
|
|
749
765
|
title: `Tab ${t + 1}`,
|
|
750
766
|
settings: {
|
|
751
|
-
name: new
|
|
767
|
+
name: new k({
|
|
752
768
|
title: "Tab Name",
|
|
753
769
|
default: `Tab ${t + 1}`
|
|
754
770
|
}),
|
|
755
|
-
content: new
|
|
771
|
+
content: new k({
|
|
756
772
|
title: "Content",
|
|
757
773
|
default: ""
|
|
758
774
|
})
|
|
@@ -776,23 +792,23 @@ class D extends C {
|
|
|
776
792
|
<path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"></path>
|
|
777
793
|
</svg>
|
|
778
794
|
`, s.onclick = () => {
|
|
779
|
-
var
|
|
780
|
-
return (
|
|
795
|
+
var o;
|
|
796
|
+
return (o = this.onDeleteCallback) == null ? void 0 : o.call(this);
|
|
781
797
|
}, n.appendChild(s);
|
|
782
|
-
const
|
|
783
|
-
|
|
798
|
+
const a = i.querySelector("h3");
|
|
799
|
+
a ? a.insertAdjacentElement("afterend", n) : i.appendChild(n);
|
|
784
800
|
}
|
|
785
801
|
return t;
|
|
786
802
|
}
|
|
787
803
|
}
|
|
788
|
-
class
|
|
804
|
+
class st extends g {
|
|
789
805
|
// Store the rendered element
|
|
790
806
|
constructor() {
|
|
791
807
|
super({ title: "Tabs", settings: {} }), this.tabs = [], this._el = null, this.addTab();
|
|
792
808
|
}
|
|
793
809
|
/** Adds a new tab. */
|
|
794
810
|
addTab() {
|
|
795
|
-
const t = this.tabs.length, e = new
|
|
811
|
+
const t = this.tabs.length, e = new J(t, () => this.removeTab(e));
|
|
796
812
|
this.tabs.push(e), this.settings[`Tab ${t + 1}`] = e;
|
|
797
813
|
}
|
|
798
814
|
/** Removes a specific tab. */
|
|
@@ -845,7 +861,7 @@ class et extends C {
|
|
|
845
861
|
}));
|
|
846
862
|
}
|
|
847
863
|
}
|
|
848
|
-
class
|
|
864
|
+
class at extends g {
|
|
849
865
|
/**
|
|
850
866
|
* Constructs a new BackgroundSettingSet.
|
|
851
867
|
*
|
|
@@ -873,18 +889,19 @@ class it extends C {
|
|
|
873
889
|
constructor(t) {
|
|
874
890
|
super({
|
|
875
891
|
title: "Background Image",
|
|
892
|
+
collapsed: t == null ? void 0 : t.collapsed,
|
|
876
893
|
settings: {
|
|
877
|
-
backgroundImage: new
|
|
894
|
+
backgroundImage: new W({
|
|
878
895
|
...t == null ? void 0 : t.uploadProps,
|
|
879
896
|
default: (t == null ? void 0 : t.backgroundImage) ?? ""
|
|
880
897
|
}),
|
|
881
|
-
opacity: new
|
|
898
|
+
opacity: new b({
|
|
882
899
|
default: (t == null ? void 0 : t.opacity) ?? 100
|
|
883
900
|
}),
|
|
884
|
-
backgroundColor: new
|
|
901
|
+
backgroundColor: new y({
|
|
885
902
|
default: (t == null ? void 0 : t.backgroundColor) ?? "#00141E"
|
|
886
903
|
}),
|
|
887
|
-
opacityBG: new
|
|
904
|
+
opacityBG: new b({
|
|
888
905
|
default: (t == null ? void 0 : t.opacityBG) ?? 100
|
|
889
906
|
})
|
|
890
907
|
}
|
|
@@ -896,10 +913,10 @@ class it extends C {
|
|
|
896
913
|
draw() {
|
|
897
914
|
const t = super.draw(), e = t.querySelector(".setting-group-content");
|
|
898
915
|
if (!e) return t;
|
|
899
|
-
const i = Array.from(e.children), [n, s,
|
|
916
|
+
const i = Array.from(e.children), [n, s, a, o] = i;
|
|
900
917
|
e.innerHTML = "", e.appendChild(n), e.appendChild(s);
|
|
901
918
|
const r = document.createElement("div");
|
|
902
|
-
return r.className = "bgset-or-label", r.textContent = "OR", e.appendChild(r), e.appendChild(
|
|
919
|
+
return r.className = "bgset-or-label", r.textContent = "OR", e.appendChild(r), e.appendChild(a), e.appendChild(o), t;
|
|
903
920
|
}
|
|
904
921
|
/**
|
|
905
922
|
* Helper method to generate CSS based on the current settings.
|
|
@@ -918,23 +935,23 @@ class it extends C {
|
|
|
918
935
|
}
|
|
919
936
|
}
|
|
920
937
|
export {
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
938
|
+
I as AlignSetting,
|
|
939
|
+
at as BackgroundSettingSet,
|
|
940
|
+
et as BorderSettingSet,
|
|
941
|
+
Q as ButtonSetting,
|
|
942
|
+
y as ColorSetting,
|
|
943
|
+
Y as DimensionSetting,
|
|
944
|
+
it as HeaderTypographySettingSet,
|
|
945
|
+
K as HeightSetting,
|
|
946
|
+
nt as MarginSettingGroup,
|
|
947
|
+
C as NumberSetting,
|
|
948
|
+
b as OpacitySetting,
|
|
949
|
+
H as SelectSetting,
|
|
950
|
+
p as Setting,
|
|
951
|
+
g as SettingGroup,
|
|
952
|
+
k as StringSetting,
|
|
953
|
+
st as TabsContainerGroup,
|
|
954
|
+
W as UploadSetting,
|
|
955
|
+
tt as WidthSetting,
|
|
939
956
|
L as iterateSettings
|
|
940
957
|
};
|
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(
|
|
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{transform:rotate(180deg);display:flex;transition:transform .3s ease-in-out}.setting-group-arrow.rotated{transform:rotate(0)}.setting-group-content{flex-direction:column;gap:8px;max-height:fit-content;display:flex;transition:max-height .3s ease-in-out,display .2s ease-in-out}.setting-group-content.collapsed{max-height:0;display:none}.icon-container{display:flex;align-items:center;gap:4px}.input-icon{display:flex;align-items:center;justify-content:center;color:var(--color-text)}.input-label{color:var(--color-text)}.input-container{display:inline-flex;align-items:center;position:relative}.with-suffix{flex:1;padding-right:36px}.input-suffix{position:absolute;right:8px;top:50%;transform:translateY(-50%);color:#666;pointer-events:none;font-size:.9em}.string-setting-wrapper{display:flex;justify-content:space-between;align-items:center}.string-setting-input{max-width:120px;padding:8px;font-size:14px;border-radius:8px;color:var(--color-input-text);border:1px solid var(--color-border);background:var(--color-bg)}.color-setting-wrapper{display:flex;align-items:center;justify-content:space-between;gap:2px}.color-input-wrapper{position:relative;padding:8px 8px 8px 4px;width:120px;height:33px;display:flex;align-items:center;gap:4px;border:1px solid var(--color-border);border-radius:8px;background-color:var(--color-bg)}.color-text-input{border:none;outline:none;width:65px;color:var(--color-input-text);font-size:14px;text-align:center;background:transparent}.color-picker{position:absolute;left:0;top:0;width:25px;height:25px;opacity:0;cursor:pointer}.color-preview{width:25px;height:25px;border-radius:4px}.number-setting-wrapper{display:flex;align-items:center;justify-content:space-between}.number-setting-input{width:120px;padding:8px;font-size:14px;border-radius:8px;color:var(--color-input-text);border:1px solid var(--color-border);background:var(--color-bg);box-sizing:border-box}.suffix-wrapper{position:relative;display:inline-flex;align-items:center}.suffix-label{position:absolute;right:8px;padding-left:8px;top:50%;transform:translateY(-50%);border-left:1px solid var(--color-divider);font-size:12px;color:var(--color-text)}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.select-container{display:flex;align-items:center;gap:4px;justify-content:space-between}.select{width:120px;padding:8px;font-size:14px;border-radius:8px;border:1px solid var(--color-border);background:var(--color-bg);cursor:pointer}.select:focus{outline:none}.align-setting-wrapper{display:flex;align-items:center;justify-content:space-between}.align-setting-label{font-size:12px;color:var(--color-text)}.align-options-container{width:120px;color:#0006;background-color:#f5f6f7;border-radius:9999px;padding:4px 13px;display:flex;gap:8px}.align-option-button{display:flex;align-items:center;justify-content:center;width:26px;height:26px;background:transparent;border:none;cursor:pointer;border-radius:50%;transition:background-color .2s,color .2s}.align-option-button:hover{background-color:#fff}.align-option-button.selected{background-color:var(--color-white);color:var(--color-black)}.button-setting-wrapper{display:flex;justify-content:center}.button-setting{padding:8px 16px;background-color:var(--button-bg, #007bff);color:var(--button-color, #fff);border:none;border-radius:4px;cursor:pointer;font-size:14px}.button-setting:hover{background-color:var(--button-bg-hover, #0056b3)}.dimension-setting-container{display:flex;flex-direction:column;gap:8px;position:relative}.dimension-bracket{width:18px;height:42px;position:absolute;top:16px;right:122px;display:flex;align-items:center;justify-content:center}.dimension-bracket:before{content:"";position:absolute;width:13px;height:14px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15' fill='none'><path d='M14 1H5C2.79086 1 1 2.79086 1 5V15' stroke='%23667085'/></svg>") no-repeat center center;background-size:contain;top:0;right:1px}.dimension-bracket:after{content:"";position:absolute;width:13px;height:14px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15' fill='none'><path d='M14 14H5C2.79086 14 1 12.2091 1 10V4.76837e-07' stroke='%23667085'/></svg>") no-repeat center center;background-size:contain;bottom:0;right:1px}.dimension-lock-icon{width:24px;height:24px;background:none;cursor:pointer;display:inline-flex;align-items:center;color:#667085;z-index:1}.dimension-lock-icon:hover{color:#000}.upload-setting-wrapper{display:flex;align-items:center;justify-content:space-between;gap:12px}.preview-wrapper{position:relative;width:91px;height:71px;border-radius:4px;overflow:hidden;background-color:#f2f4f7;display:none}.preview-wrapper.has-image{display:block}.upload-preview{width:100%;height:100%;object-fit:cover;border-radius:4px;display:none}.empty-state{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.empty-state svg{width:100%;height:100%}.preview-wrapper.has-image .upload-preview{display:block}.preview-wrapper.has-image .empty-state{display:none}.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:12px;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}.preview-wrapper:not(.has-image)~.upload-button{width:100%;justify-content:center}.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}.delete-button{display:flex;width:28px;height:28px;padding:6px;justify-content:center;align-items:center;gap:8px;position:absolute;left:60px;top:3px;background:#fff;border:none;border-radius:50%;cursor:pointer;box-shadow:0 2px 4px #0000001a;transition:background-color .2s ease}.delete-button svg{width:16px;height:16px;flex-shrink:0}.delete-button:hover{background-color:#f3f4f6}.preview-wrapper:not(.has-image) .delete-button{display:none}.height-setting{display:flex;gap:8px}.height-setting-wrapper{display:flex;align-items:center;justify-content:space-between;gap:2px}.height-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)}.height-text-input{border:none;outline:none;width:65px;color:var(--color-input-text);font-size:14px;text-align:center;background:transparent}.width-setting{display:flex;gap:8px}.width-setting-wrapper{display:flex;align-items:center;justify-content:space-between;gap:2px}.width-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)}.width-text-input{border:none;outline:none;width:65px;color:var(--color-input-text);font-size:14px;text-align:center;background:transparent}.width-setting .number-setting{width:100%}.tab-delete-button{background:transparent;border:none;cursor:pointer;padding:2px 4px}.tab-delete-button svg{width:16px;height:16px}.tabs-add-btn-container{display:flex;justify-content:flex-end}.tabs-add-button{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:14px;color:#667085;transition:transform .15s ease,box-shadow .3s ease}.tabs-add-button:hover{transform:scale(1);box-shadow:0 2px 6px #0000001a}.add-icon{display:flex;align-items:center;width:18px}.add-label{display:inline-block}.bgset-or-label{margin:8px 0;text-align:center;font-weight:500;color:#667085}: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
|
@@ -46,6 +46,7 @@ export declare class BackgroundSettingSet extends SettingGroup<{
|
|
|
46
46
|
backgroundColor?: string;
|
|
47
47
|
opacityBG?: number;
|
|
48
48
|
uploadProps?: UploadSettingProps;
|
|
49
|
+
collapsed?: boolean;
|
|
49
50
|
});
|
|
50
51
|
/**
|
|
51
52
|
* Override draw() to reorder the child settings and insert an "OR" label between the two sections.
|
|
@@ -73,6 +74,7 @@ export declare class BorderSettingSet extends SettingGroup<{
|
|
|
73
74
|
opacity?: number;
|
|
74
75
|
radius?: number;
|
|
75
76
|
size?: number;
|
|
77
|
+
collapsed?: boolean;
|
|
76
78
|
});
|
|
77
79
|
/**
|
|
78
80
|
* Optional helper to generate CSS from the current settings.
|
|
@@ -174,6 +176,7 @@ declare interface HeaderTypographySettings {
|
|
|
174
176
|
fontWeightGetOptionsAsync?: () => Promise<SelectOption[]>;
|
|
175
177
|
fontSizeDefault?: number;
|
|
176
178
|
alignDefault?: AlignValue;
|
|
179
|
+
collapsed?: boolean;
|
|
177
180
|
}
|
|
178
181
|
|
|
179
182
|
export declare class HeaderTypographySettingSet extends SettingGroup<{
|
|
@@ -325,6 +328,7 @@ export declare class SettingGroup<T extends Record<string, Setting<any, any> | S
|
|
|
325
328
|
settings: T;
|
|
326
329
|
id: string;
|
|
327
330
|
onChange?: ((value: T) => void) | undefined;
|
|
331
|
+
private isCollapsed;
|
|
328
332
|
constructor(groupProps: SettingGroupProps<T>);
|
|
329
333
|
setOnChange(onChange: (value: T) => void): SettingGroup<T>;
|
|
330
334
|
/**
|
|
@@ -339,6 +343,7 @@ export declare type SettingGroupProps<T> = {
|
|
|
339
343
|
title: string;
|
|
340
344
|
settings: T;
|
|
341
345
|
id?: string;
|
|
346
|
+
collapsed?: boolean;
|
|
342
347
|
};
|
|
343
348
|
|
|
344
349
|
export declare interface SettingProps<T> {
|
|
@@ -394,13 +399,13 @@ declare class TabSettingGroup extends SettingGroup<{
|
|
|
394
399
|
draw(): HTMLElement;
|
|
395
400
|
}
|
|
396
401
|
|
|
397
|
-
/**
|
|
398
|
-
* A Setting subclass that uploads the selected image file to a remote endpoint,
|
|
399
|
-
* using fully configurable request properties (URL, headers, etc.).
|
|
400
|
-
*/
|
|
401
402
|
export declare class UploadSetting extends Setting<string, UploadSettingProps> {
|
|
402
403
|
inputType: InputTypes;
|
|
404
|
+
private previewWrapper;
|
|
405
|
+
private previewEl;
|
|
406
|
+
private emptyStateEl;
|
|
403
407
|
constructor(props?: UploadSettingProps);
|
|
408
|
+
private updatePreviewState;
|
|
404
409
|
draw(): HTMLElement;
|
|
405
410
|
}
|
|
406
411
|
|
package/package.json
CHANGED