builder-settings-types 0.0.53 → 0.0.55
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 +10 -10
- package/dist/builder-settings-types.es.js +82 -72
- package/dist/index.d.ts +16 -22
- package/package.json +1 -1
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const k="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";let x=(l=21)=>{let t="",e=crypto.getRandomValues(new Uint8Array(l|=0));for(;l--;)t+=k[e[l]&63];return t};function H(l,t){for(const e in l)if(l.hasOwnProperty(e)){const i=l[e];t(e,i)}}class m{constructor(t){this.id=t.id||x(),this.title=t.title,this.settings=t.settings,Object.assign(this,t.settings)}setOnChange(t){return this.onChange=t,H(this.settings,(e,i)=>{i.setOnChange(t)}),this}getValues(t){if(t===void 0){const e={};for(const i in this.settings)if(this.settings.hasOwnProperty(i)){const n=this.settings[i];n instanceof m?e[i]=n.getValues():e[i]=n.value}return e}else{const e=this.settings[t];return e?e instanceof m?e.getValues():e.value:void 0}}draw(){const t=document.createElement("div");t.className="setting-group";const e=document.createElement("div");e.className="setting-group-title";const i=document.createElement("h3");i.textContent=this.title;const n=document.createElement("span");n.className="setting-group-arrow",n.innerHTML=`
|
|
2
2
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
3
3
|
<path d="M5 7.5L10 12.5L15 7.5" stroke="#344054" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
4
|
</svg>
|
|
5
|
-
`,e.onclick=()=>{const a=t.querySelector(".setting-group-content");a&&(a.classList.toggle("collapsed"),n.classList.toggle("rotated"))},e.appendChild(i),e.appendChild(n);const s=document.createElement("div");s.className="setting-group-content";for(const a in this.settings)if(this.settings.hasOwnProperty(a)){const o=this.settings[a];s.appendChild(o.draw())}return t.appendChild(e),t.appendChild(s),t}}function b(
|
|
5
|
+
`,e.onclick=()=>{const a=t.querySelector(".setting-group-content");a&&(a.classList.toggle("collapsed"),n.classList.toggle("rotated"))},e.appendChild(i),e.appendChild(n);const s=document.createElement("div");s.className="setting-group-content";for(const a in this.settings)if(this.settings.hasOwnProperty(a)){const o=this.settings[a];s.appendChild(o.draw())}return t.appendChild(e),t.appendChild(s),t}}function b(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 d{constructor(t={}){this.props=t,this.id=t.id||x(),this.value=this.props.default,this.title=t.title||""}setOnChange(t){return this.onChange=t,this}setValue(t){this.value=t,this.inputEl&&(this.inputEl.value=String(t)),this.onChange&&this.onChange(t)}createInput(t){t={...this.props.inputProps,...t};const e=document.createElement("div");if(e.className=t.wrapperClassName||"",t.title||t.icon){const s=document.createElement("div");if(s.className="icon-container",t.icon){const a=this.createIcon(t.icon,t.iconClassName);s.appendChild(a)}if(t.title){const a=this.createLabel(t.title,t.labelClassName);s.appendChild(a)}e.appendChild(s)}const i=document.createElement("div");i.className=t.wrapperClassName||"";const n=document.createElement("input");return this.inputEl=n,n.value=String(t.value||b(t.inputType)),n.type=t.inputType,n.placeholder=t.placeholder||"",n.className=t.inputClassName||"",n.oninput=s=>{const a=s.target;let o=a.value;t.inputType==="number"?o=Number(a.value):(t.inputType==="color"||t.inputType==="date")&&(o=a.value),this.value=o,this.onChange&&this.onChange(this.value)},t.inputCustomizer&&t.inputCustomizer(n),i.appendChild(n),e.appendChild(i),e}createLabel(t,e){const i=document.createElement("span");return i.textContent=t,i.className="input-label "+(e||""),i}createIcon(t,e){const i=document.createElement("span");return i.className="input-icon "+(e||""),i.innerHTML=t,i}}class v extends d{constructor(t){super({...t,default:t.default!==void 0?t.default:"auto"}),this.inputType="number",this.value=t.default!==void 0?t.default:"auto"}draw(){const t=this.value==="auto"?"text":"number",e=o=>{this.value!=="auto"&&(this.props.minValue!==void 0&&(o.min=String(this.props.minValue)),this.props.maxValue!==void 0&&(o.max=String(this.props.maxValue)),this.props.className&&o.classList.add(this.props.className),o.addEventListener("input",()=>{const r=this.props.minValue??Number.MIN_SAFE_INTEGER,h=this.props.maxValue??Number.MAX_SAFE_INTEGER;let u=Number(o.value);u<r&&(u=r),u>h&&(u=h),o.value=String(u)}))},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 h=Number(r);isNaN(h)||(this.value=h)}this.onChange&&this.onChange(this.value)}),i}}class E extends m{constructor(){super({title:"Margins",settings:{marginTop:new v({title:"Top",icon:L,suffix:"px",default:"auto"}),marginRight:new v({title:"Right",icon:S,suffix:"px",default:0}),marginBottom:new v({title:"Bottom",icon:y,suffix:"px",default:0}),marginLeft:new v({title:"Left",icon:V,suffix:"px",default:0})}})}getCssCode(){const t=typeof this.settings.marginTop.value=="number"?`${this.settings.marginTop.value}px`:this.settings.marginTop.value,e=typeof this.settings.marginRight.value=="number"?`${this.settings.marginRight.value}px`:this.settings.marginRight.value,i=typeof this.settings.marginBottom.value=="number"?`${this.settings.marginBottom.value}px`:this.settings.marginBottom.value,n=typeof this.settings.marginLeft.value=="number"?`${this.settings.marginLeft.value}px`:this.settings.marginLeft.value;return`
|
|
6
6
|
margin-top: ${t};
|
|
7
7
|
margin-right: ${e};
|
|
8
8
|
margin-bottom: ${i};
|
|
9
9
|
margin-left: ${n};
|
|
10
|
-
`}}const
|
|
10
|
+
`}}const L=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
11
11
|
<path d="M2.25 16.25H2.2575M2.25 9.5H2.2575M2.25 12.875H2.2575M2.25 6.125H2.2575M5.625 16.25H5.6325M5.625 9.5H5.6325M12.375 16.25H12.3825M12.375 9.5H12.3825M9 16.25H9.0075M9 9.5H9.0075M9 12.875H9.0075M9 6.125H9.0075M15.75 16.25H15.7575M15.75 9.5H15.7575M15.75 12.875H15.7575M15.75 6.125H15.7575M15.75 2.75H2.25" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
12
12
|
</svg>`,S=`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 16 15" fill="none">
|
|
13
13
|
<path d="M4.625 0.75H4.6325M4.625 7.5H4.6325M4.625 14.25H4.6325M11.375 0.75H11.3825M11.375 7.5H11.3825M11.375 14.25H11.3825M8 0.75H8.0075M8 7.5H8.0075M8 14.25H8.0075M8 10.875H8.0075M8 4.125H8.0075M1.25 0.75H1.2575M1.25 7.5H1.2575M1.25 14.25H1.2575M1.25 10.875H1.2575M1.25 4.125H1.2575M14.75 14.25V0.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
<path d="M2.25 2.75H2.2575M2.25 9.5H2.2575M2.25 12.875H2.2575M2.25 6.125H2.2575M5.625 2.75H5.6325M5.625 9.5H5.6325M12.375 2.75H12.3825M12.375 9.5H12.3825M9 2.75H9.0075M9 9.5H9.0075M9 12.875H9.0075M9 6.125H9.0075M15.75 2.75H15.7575M15.75 9.5H15.7575M15.75 12.875H15.7575M15.75 6.125H15.7575M15.75 16.25H2.25" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
16
16
|
</svg>`,V=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
17
17
|
<path d="M5.625 2.75H5.6325M5.625 9.5H5.6325M5.625 16.25H5.6325M12.375 2.75H12.3825M12.375 9.5H12.3825M12.375 16.25H12.3825M9 2.75H9.0075M9 9.5H9.0075M9 16.25H9.0075M9 12.875H9.0075M9 6.125H9.0075M15.75 2.75H15.7575M15.75 9.5H15.7575M15.75 16.25H15.7575M15.75 12.875H15.7575M15.75 6.125H15.7575M2.25 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
18
|
-
</svg>`;class
|
|
18
|
+
</svg>`;class N extends d{constructor(t={}){super(t),this.inputType="text"}draw(){const t=e=>{this.props.maxLength!==void 0&&(e.maxLength=this.props.maxLength),this.props.className&&e.classList.add(this.props.className)};return this.createInput({value:this.value,inputType:this.inputType,title:this.props.title,placeholder:this.props.placeholder,icon:this.props.icon,inputClassName:"string-setting-input "+(this.props.inputClassName||""),wrapperClassName:"string-setting-wrapper "+(this.props.wrapperClassName||""),inputCustomizer:t})}}const M="<svg xmlns='http://www.w3.org/2000/svg' width='18' height='19' viewBox='0 0 18 19' fill='none'><path d='M8.99999 15.8542C9.79613 16.5667 10.8475 17 12 17C14.4853 17 16.5 14.9853 16.5 12.5C16.5 10.4248 15.0953 8.67769 13.1849 8.15763M4.81513 8.15762C2.9047 8.67768 1.5 10.4248 1.5 12.5C1.5 14.9853 3.51472 17 6 17C8.48528 17 10.5 14.9853 10.5 12.5C10.5 11.9146 10.3882 11.3554 10.1849 10.8424M13.5 6.5C13.5 8.98528 11.4853 11 9 11C6.51472 11 4.5 8.98528 4.5 6.5C4.5 4.01472 6.51472 2 9 2C11.4853 2 13.5 4.01472 13.5 6.5Z' stroke='#667085' stroke-linecap='round' stroke-linejoin='round'/></svg>";class T extends N{constructor(t){super({...t,icon:t.icon||M,title:t.title||"Color"}),this.inputType="color"}draw(){const t=document.createElement("div");t.className="color-setting-wrapper";const e=document.createElement("div");e.className="icon-container";const i=this.createIcon(this.props.icon||M),n=this.createLabel(this.title||"Color");e.appendChild(i),e.appendChild(n);const s=document.createElement("div");s.className="color-input-wrapper";const a=/^([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/,o=p=>{const c=p.value.startsWith("#")?p.value.slice(1):p.value;return a.test(c)?(p.style.border="",!0):(p.style.border="1px solid red",!1)},r=document.createElement("div");r.className="color-preview",r.style.backgroundColor=this.value||"";const h=this.createInput({value:this.value,inputType:"text",inputClassName:"color-text-input"}),u=h.querySelector("input"),g=this.createInput({value:this.value,inputType:this.inputType,inputClassName:"color-picker"}),w=g.querySelector("input");return u.oninput=p=>{var C;let c=p.target.value.trim();c.charAt(0)!=="#"&&(c="#"+c,u.value=c),o(u)&&(this.value=c,(C=this.onChange)==null||C.call(this,c),w.value=c,r.style.backgroundColor=c)},w.oninput=p=>{var C;let c=p.target.value;c.charAt(0)!=="#"&&(c="#"+c,w.value=c),this.value=c,(C=this.onChange)==null||C.call(this,c),u.value=c,r.style.backgroundColor=c,o(u)},s.appendChild(r),s.appendChild(g),s.appendChild(h),t.appendChild(e),t.appendChild(s),t}}class f extends d{constructor(t={}){super(t),this.inputType="number"}draw(){const t=s=>{this.props.minValue!==void 0&&(s.min=String(this.props.minValue)),this.props.maxValue!==void 0&&(s.max=String(this.props.maxValue)),this.props.className&&s.classList.add(this.props.className),s.addEventListener("input",()=>{const a=this.props.minValue??Number.MIN_SAFE_INTEGER,o=this.props.maxValue??Number.MAX_SAFE_INTEGER;let 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 I extends f{constructor(t){super({...t,minValue:0,maxValue:100,icon:t.icon||R,title:t.title||"Opacity"}),this.inputType="number"}}const R=`
|
|
19
19
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
20
20
|
<path d="M3.69749 15.365C3.54749 15.365 3.40502 15.305 3.30002 15.2C1.77752 13.6775 0.9375 11.6525 0.9375 9.5C0.9375 5.0525 4.5525 1.4375 9 1.4375C11.1525 1.4375 13.1775 2.2775 14.7 3.8C14.805 3.905 14.865 4.0475 14.865 4.1975C14.865 4.3475 14.805 4.49 14.7 4.595L4.09502 15.2C3.99002 15.305 3.84749 15.365 3.69749 15.365ZM9 2.5625C5.175 2.5625 2.0625 5.675 2.0625 9.5C2.0625 11.165 2.64751 12.74 3.71251 13.9925L13.4925 4.2125C12.24 3.1475 10.665 2.5625 9 2.5625Z" fill="#667085"/>
|
|
21
21
|
<path d="M9.00014 17.5623C6.84764 17.5623 4.82266 16.7223 3.30016 15.1998C3.19516 15.0948 3.13513 14.9523 3.13513 14.8023C3.13513 14.6523 3.19516 14.5098 3.30016 14.4048L13.9051 3.79984C14.1226 3.58234 14.4826 3.58234 14.7001 3.79984C16.2226 5.32234 17.0626 7.34734 17.0626 9.49984C17.0626 13.9473 13.4476 17.5623 9.00014 17.5623ZM4.50764 14.7873C5.76014 15.8523 7.33514 16.4373 9.00014 16.4373C12.8251 16.4373 15.9376 13.3248 15.9376 9.49984C15.9376 7.83484 15.3526 6.25984 14.2876 5.00734L4.50764 14.7873Z" fill="#667085"/>
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
<path d="M13.4025 15.5225C13.26 15.5225 13.1175 15.47 13.005 15.3575L8.06999 10.4225C7.85249 10.205 7.85249 9.84498 8.06999 9.62748C8.28749 9.40998 8.64748 9.40998 8.86498 9.62748L13.8 14.5625C14.0175 14.78 14.0175 15.14 13.8 15.3575C13.6875 15.47 13.545 15.5225 13.4025 15.5225Z" fill="#667085"/>
|
|
24
24
|
<path d="M15.84 12.6648C15.6975 12.6648 15.555 12.6123 15.4425 12.4998L10.725 7.78234C10.5075 7.56484 10.5075 7.20484 10.725 6.98734C10.9425 6.76984 11.3025 6.76984 11.52 6.98734L16.2375 11.7048C16.455 11.9223 16.455 12.2823 16.2375 12.4998C16.1325 12.6048 15.99 12.6648 15.84 12.6648Z" fill="#667085"/>
|
|
25
25
|
</svg>
|
|
26
|
-
`;class B extends d{constructor(t={}){super(t),this.inputType="select",this.
|
|
26
|
+
`;class B extends d{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 O extends d{constructor(t={}){super(t),this.inputType="button",this.value||(this.value="center")}draw(){const t=document.createElement("div");t.className="align-setting-wrapper";const e=document.createElement("label");e.className="align-setting-label",e.textContent=this.title||"Align",t.appendChild(e);const i=document.createElement("div");return i.className="align-options-container",[{name:"left",icon:`
|
|
27
27
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
|
|
28
28
|
<path d="M10.5 7.5C11.1989 7.5 11.5484 7.5 11.824 7.38582C12.1916 7.23358 12.4836 6.94157 12.6358 6.57402C12.75 6.29837 12.75 5.94891 12.75 5.25C12.75 4.55109 12.75 4.20163 12.6358 3.92598C12.4836 3.55843 12.1916 3.26642 11.824 3.11418C11.5484 3 11.1989 3 10.5 3L4.5 3C3.80109 3 3.45163 3 3.17598 3.11418C2.80843 3.26642 2.51642 3.55843 2.36418 3.92597C2.25 4.20163 2.25 4.55109 2.25 5.25C2.25 5.94891 2.25 6.29837 2.36418 6.57402C2.51642 6.94157 2.80843 7.23358 3.17598 7.38582C3.45163 7.5 3.80109 7.5 4.5 7.5L10.5 7.5Z"
|
|
29
29
|
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
<path d="M13.5 15C14.1989 15 14.5484 15 14.824 14.8858C15.1916 14.7336 15.4836 14.4416 15.6358 14.074C15.75 13.7984 15.75 13.4489 15.75 12.75C15.75 12.0511 15.75 11.7016 15.6358 11.426C15.4836 11.0584 15.1916 10.7664 14.824 10.6142C14.5484 10.5 14.1989 10.5 13.5 10.5H4.5C3.80109 10.5 3.45163 10.5 3.17598 10.6142C2.80843 10.7664 2.51642 11.0584 2.36418 11.426C2.25 11.7016 2.25 12.0511 2.25 12.75C2.25 13.4489 2.25 13.7984 2.36418 14.074C2.51642 14.4416 2.80843 14.7336 3.17597 14.8858C3.45163 15 3.80109 15 4.5 15L13.5 15Z"
|
|
45
45
|
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
46
46
|
</svg>
|
|
47
|
-
`}].forEach(s=>{const a=document.createElement("button");a.className="align-option-button",a.innerHTML=s.icon,this.value===s.name&&a.classList.add("selected"),a.addEventListener("click",()=>{var o;i.querySelectorAll(".align-option-button").forEach(
|
|
47
|
+
`}].forEach(s=>{const a=document.createElement("button");a.className="align-option-button",a.innerHTML=s.icon,this.value===s.name&&a.classList.add("selected"),a.addEventListener("click",()=>{var o;i.querySelectorAll(".align-option-button").forEach(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 A extends d{constructor(t){super(t),this.inputType="button"}draw(){const t=document.createElement("button");t.className="button-setting "+(this.props.className||""),t.textContent=this.props.label,t.addEventListener("click",()=>{this.props.onClick&&this.props.onClick()});const e=document.createElement("div");return e.className="button-setting-wrapper "+(this.props.wrapperClassName||""),e.appendChild(t),e}}class j extends d{constructor(t={}){super(t),this.inputType={width:"number",height:"number"},this.isUpdating=!1,this.value||(this.value={width:100,height:100}),this.locked=t.locked??!1,this.value.height===0&&(this.value.height=1),this.aspectRatio=this.value.width/this.value.height,this.widthSetting=new f({title:"Width",default:this.value.width,suffix:"px",minValue:t.minWidth??1,maxValue:t.maxWidth,icon:U}),this.heightSetting=new f({title:"Height",default:this.value.height,suffix:"px",minValue:t.minHeight??1,maxValue:t.maxHeight,icon:Z}),this.widthSetting.setOnChange(e=>{var s;if(this.isUpdating||isNaN(e)||e<1)return;this.isUpdating=!0;let i=e,n=this.value.height;this.locked&&isFinite(this.aspectRatio)&&!isNaN(this.aspectRatio)&&(n=Math.round(i/this.aspectRatio),n<1&&(n=1)),this.value={width:i,height:n},n!==0&&(this.aspectRatio=i/n),(s=this.onChange)==null||s.call(this,this.value),this.heightSetting.setValue(n),this.isUpdating=!1}),this.heightSetting.setOnChange(e=>{var s;if(this.isUpdating||isNaN(e)||e<1)return;this.isUpdating=!0;let i=e,n=this.value.width;this.locked&&isFinite(this.aspectRatio)&&!isNaN(this.aspectRatio)&&(n=Math.round(i*this.aspectRatio),n<1&&(n=1)),this.value={width:n,height:i},i!==0&&(this.aspectRatio=n/i),(s=this.onChange)==null||s.call(this,this.value),this.widthSetting.setValue(n),this.isUpdating=!1})}toggleLock(t){if(this.locked=!this.locked,this.locked){const e=this.value.width,i=this.value.height;i!==0&&(this.aspectRatio=e/i)}t.innerHTML=this.getLockSVG(this.locked)}getLockSVG(t){return t?`
|
|
48
48
|
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none">
|
|
49
49
|
<path d="M2.91663 4.58333V3.33333C2.91663 2.18274 3.84937 1.25 4.99996 1.25C6.00786 1.25 6.84859 1.96573 7.04162 2.91667M3.66663 8.75H6.33329C7.03336 8.75 7.38339 8.75 7.65078 8.61376C7.88598 8.49392 8.07721 8.30269 8.19705 8.06749C8.33329 7.8001 8.33329 7.45007 8.33329 6.75V6.58333C8.33329 5.88327 8.33329 5.53323 8.19705 5.26584C8.07721 5.03064 7.88598 4.83942 7.65078 4.71958C7.38339 4.58333 7.03336 4.58333 6.33329 4.58333H3.66663C2.96656 4.58333 2.61653 4.58333 2.34914 4.71958C2.11394 4.83942 1.92271 5.03064 1.80287 5.26584C1.66663 5.53323 1.66663 5.88327 1.66663 6.58333V6.75C1.66663 7.45007 1.66663 7.8001 1.80287 8.06749C1.92271 8.30269 2.11394 8.49392 2.34914 8.61376C2.61653 8.75 2.96656 8.75 3.66663 8.75Z" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
50
50
|
</svg>
|
|
@@ -56,11 +56,11 @@
|
|
|
56
56
|
<path d="M4.5 9.5H13.5M4.5 9.5L6 7.25M4.5 9.5L6 11.75M13.5 9.5L12 7.25M13.5 9.5L12 11.75M15.75 16.25V2.75M2.25 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
57
57
|
</svg>`,Z=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
58
58
|
<path d="M9 14L9 5M9 14L6.75 12.5M9 14L11.25 12.5M9 5L6.75 6.5M9 5L11.25 6.5M15.75 2.75H2.25M15.75 16.25H2.25" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
59
|
-
</svg>`,
|
|
59
|
+
</svg>`,_=`
|
|
60
60
|
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" viewBox="0 0 15 16" fill="none">
|
|
61
61
|
<path d="M5 10.5L7.5 8M7.5 8L10 10.5M7.5 8V13.625M12.5 10.9643C13.2634 10.3338 13.75 9.37996 13.75 8.3125C13.75 6.41402 12.211 4.875 10.3125 4.875C10.1759 4.875 10.0482 4.80375 9.97882 4.68609C9.16379 3.30302 7.65902 2.375 5.9375 2.375C3.34867 2.375 1.25 4.47367 1.25 7.0625C1.25 8.35381 1.77215 9.52317 2.61684 10.371" stroke="#475467" stroke-linecap="round" stroke-linejoin="round"/>
|
|
62
62
|
</svg>
|
|
63
|
-
`;class
|
|
64
|
-
<span class="upload-icon">${
|
|
63
|
+
`;class W extends d{constructor(t={}){super(t),this.inputType="button",!this.value&&t.defaultUrl&&(this.value=t.defaultUrl)}draw(){const t=document.createElement("div");t.className="upload-setting-wrapper";const e=document.createElement("img");e.className="upload-preview",e.src=this.value||this.props.defaultUrl||"";const i=document.createElement("button");i.className="upload-button",i.innerHTML=`
|
|
64
|
+
<span class="upload-icon">${_}</span>
|
|
65
65
|
<span class="upload-label">Upload</span>
|
|
66
|
-
`;const n=document.createElement("input");return n.type="file",n.accept="image/*",n.style.display="none",i.onclick=()=>{n.click()},n.onchange=()=>{var a;const s=(a=n.files)==null?void 0:a[0];if(s){const o=new FileReader;o.onload=
|
|
66
|
+
`;const n=document.createElement("input");return n.type="file",n.accept="image/*",n.style.display="none",i.onclick=()=>{n.click()},n.onchange=()=>{var a;const s=(a=n.files)==null?void 0:a[0];if(s){const o=new FileReader;o.onload=r=>{var u,g;const h=(u=r.target)==null?void 0:u.result;this.value=h,e.src=h,(g=this.onChange)==null||g.call(this,h)},o.readAsDataURL(s)}},t.appendChild(e),t.appendChild(i),t.appendChild(n),t}}exports.AlignSetting=O;exports.ButtonSetting=A;exports.ColorSetting=T;exports.DimensionSetting=j;exports.MarginSettingGroup=E;exports.NumberSetting=f;exports.OpacitySetting=I;exports.SelectSetting=B;exports.Setting=d;exports.SettingGroup=m;exports.StringSetting=N;exports.UploadSetting=W;exports.iterateSettings=H;
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
const H = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
|
|
2
|
-
let x = (
|
|
3
|
-
let t = "", e = crypto.getRandomValues(new Uint8Array(
|
|
4
|
-
for (;
|
|
5
|
-
t += H[e[
|
|
2
|
+
let x = (l = 21) => {
|
|
3
|
+
let t = "", e = crypto.getRandomValues(new Uint8Array(l |= 0));
|
|
4
|
+
for (; l--; )
|
|
5
|
+
t += H[e[l] & 63];
|
|
6
6
|
return t;
|
|
7
7
|
};
|
|
8
|
-
function k(
|
|
9
|
-
for (const e in
|
|
10
|
-
if (
|
|
11
|
-
const i =
|
|
8
|
+
function k(l, t) {
|
|
9
|
+
for (const e in l)
|
|
10
|
+
if (l.hasOwnProperty(e)) {
|
|
11
|
+
const i = l[e];
|
|
12
12
|
t(e, i);
|
|
13
13
|
}
|
|
14
14
|
}
|
|
@@ -65,8 +65,8 @@ class v {
|
|
|
65
65
|
return t.appendChild(e), t.appendChild(s), t;
|
|
66
66
|
}
|
|
67
67
|
}
|
|
68
|
-
function N(
|
|
69
|
-
switch (
|
|
68
|
+
function N(l) {
|
|
69
|
+
switch (l) {
|
|
70
70
|
case "number":
|
|
71
71
|
return 0;
|
|
72
72
|
case "text":
|
|
@@ -136,9 +136,9 @@ class m extends d {
|
|
|
136
136
|
draw() {
|
|
137
137
|
const t = this.value === "auto" ? "text" : "number", e = (o) => {
|
|
138
138
|
this.value !== "auto" && (this.props.minValue !== void 0 && (o.min = String(this.props.minValue)), this.props.maxValue !== void 0 && (o.max = String(this.props.maxValue)), this.props.className && o.classList.add(this.props.className), o.addEventListener("input", () => {
|
|
139
|
-
const
|
|
140
|
-
let
|
|
141
|
-
|
|
139
|
+
const r = this.props.minValue ?? Number.MIN_SAFE_INTEGER, u = this.props.maxValue ?? Number.MAX_SAFE_INTEGER;
|
|
140
|
+
let h = Number(o.value);
|
|
141
|
+
h < r && (h = r), h > u && (h = u), o.value = String(h);
|
|
142
142
|
}));
|
|
143
143
|
}, i = this.createInput({
|
|
144
144
|
value: this.value,
|
|
@@ -161,12 +161,12 @@ class m extends d {
|
|
|
161
161
|
s.className = "suffix-label", s.textContent = this.props.suffix, i.appendChild(s);
|
|
162
162
|
const a = i.querySelector("input");
|
|
163
163
|
return a && (a.oninput = (o) => {
|
|
164
|
-
const
|
|
165
|
-
if (
|
|
164
|
+
const r = o.target.value.trim();
|
|
165
|
+
if (r.toLowerCase() === "auto")
|
|
166
166
|
this.value = "auto";
|
|
167
167
|
else {
|
|
168
|
-
const
|
|
169
|
-
isNaN(
|
|
168
|
+
const u = Number(r);
|
|
169
|
+
isNaN(u) || (this.value = u);
|
|
170
170
|
}
|
|
171
171
|
this.onChange && this.onChange(this.value);
|
|
172
172
|
}), i;
|
|
@@ -179,19 +179,19 @@ class B extends v {
|
|
|
179
179
|
settings: {
|
|
180
180
|
marginTop: new m({
|
|
181
181
|
title: "Top",
|
|
182
|
-
icon:
|
|
182
|
+
icon: E,
|
|
183
183
|
suffix: "px",
|
|
184
184
|
default: "auto"
|
|
185
185
|
}),
|
|
186
186
|
marginRight: new m({
|
|
187
187
|
title: "Right",
|
|
188
|
-
icon:
|
|
188
|
+
icon: b,
|
|
189
189
|
suffix: "px",
|
|
190
190
|
default: 0
|
|
191
191
|
}),
|
|
192
192
|
marginBottom: new m({
|
|
193
193
|
title: "Bottom",
|
|
194
|
-
icon:
|
|
194
|
+
icon: L,
|
|
195
195
|
suffix: "px",
|
|
196
196
|
default: 0
|
|
197
197
|
}),
|
|
@@ -214,11 +214,11 @@ class B extends v {
|
|
|
214
214
|
`;
|
|
215
215
|
}
|
|
216
216
|
}
|
|
217
|
-
const
|
|
217
|
+
const E = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
218
218
|
<path d="M2.25 16.25H2.2575M2.25 9.5H2.2575M2.25 12.875H2.2575M2.25 6.125H2.2575M5.625 16.25H5.6325M5.625 9.5H5.6325M12.375 16.25H12.3825M12.375 9.5H12.3825M9 16.25H9.0075M9 9.5H9.0075M9 12.875H9.0075M9 6.125H9.0075M15.75 16.25H15.7575M15.75 9.5H15.7575M15.75 12.875H15.7575M15.75 6.125H15.7575M15.75 2.75H2.25" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
219
|
-
</svg>`,
|
|
219
|
+
</svg>`, b = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 16 15" fill="none">
|
|
220
220
|
<path d="M4.625 0.75H4.6325M4.625 7.5H4.6325M4.625 14.25H4.6325M11.375 0.75H11.3825M11.375 7.5H11.3825M11.375 14.25H11.3825M8 0.75H8.0075M8 7.5H8.0075M8 14.25H8.0075M8 10.875H8.0075M8 4.125H8.0075M1.25 0.75H1.2575M1.25 7.5H1.2575M1.25 14.25H1.2575M1.25 10.875H1.2575M1.25 4.125H1.2575M14.75 14.25V0.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
221
|
-
</svg>`,
|
|
221
|
+
</svg>`, L = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
222
222
|
<path d="M2.25 2.75H2.2575M2.25 9.5H2.2575M2.25 12.875H2.2575M2.25 6.125H2.2575M5.625 2.75H5.6325M5.625 9.5H5.6325M12.375 2.75H12.3825M12.375 9.5H12.3825M9 2.75H9.0075M9 9.5H9.0075M9 12.875H9.0075M9 6.125H9.0075M15.75 2.75H15.7575M15.75 9.5H15.7575M15.75 12.875H15.7575M15.75 6.125H15.7575M15.75 16.25H2.25" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
223
223
|
</svg>`, y = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
224
224
|
<path d="M5.625 2.75H5.6325M5.625 9.5H5.6325M5.625 16.25H5.6325M12.375 2.75H12.3825M12.375 9.5H12.3825M12.375 16.25H12.3825M9 2.75H9.0075M9 9.5H9.0075M9 16.25H9.0075M9 12.875H9.0075M9 6.125H9.0075M15.75 2.75H15.7575M15.75 9.5H15.7575M15.75 16.25H15.7575M15.75 12.875H15.7575M15.75 6.125H15.7575M2.25 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
@@ -244,7 +244,7 @@ class S extends d {
|
|
|
244
244
|
}
|
|
245
245
|
}
|
|
246
246
|
const M = "<svg xmlns='http://www.w3.org/2000/svg' width='18' height='19' viewBox='0 0 18 19' fill='none'><path d='M8.99999 15.8542C9.79613 16.5667 10.8475 17 12 17C14.4853 17 16.5 14.9853 16.5 12.5C16.5 10.4248 15.0953 8.67769 13.1849 8.15763M4.81513 8.15762C2.9047 8.67768 1.5 10.4248 1.5 12.5C1.5 14.9853 3.51472 17 6 17C8.48528 17 10.5 14.9853 10.5 12.5C10.5 11.9146 10.3882 11.3554 10.1849 10.8424M13.5 6.5C13.5 8.98528 11.4853 11 9 11C6.51472 11 4.5 8.98528 4.5 6.5C4.5 4.01472 6.51472 2 9 2C11.4853 2 13.5 4.01472 13.5 6.5Z' stroke='#667085' stroke-linecap='round' stroke-linejoin='round'/></svg>";
|
|
247
|
-
class
|
|
247
|
+
class O extends S {
|
|
248
248
|
constructor(t) {
|
|
249
249
|
super({
|
|
250
250
|
...t,
|
|
@@ -262,15 +262,15 @@ class A extends S {
|
|
|
262
262
|
const s = document.createElement("div");
|
|
263
263
|
s.className = "color-input-wrapper";
|
|
264
264
|
const a = /^([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/, o = (p) => {
|
|
265
|
-
const
|
|
266
|
-
return a.test(
|
|
267
|
-
},
|
|
268
|
-
|
|
269
|
-
const
|
|
265
|
+
const c = p.value.startsWith("#") ? p.value.slice(1) : p.value;
|
|
266
|
+
return a.test(c) ? (p.style.border = "", !0) : (p.style.border = "1px solid red", !1);
|
|
267
|
+
}, r = document.createElement("div");
|
|
268
|
+
r.className = "color-preview", r.style.backgroundColor = this.value || "";
|
|
269
|
+
const u = this.createInput({
|
|
270
270
|
value: this.value,
|
|
271
271
|
inputType: "text",
|
|
272
272
|
inputClassName: "color-text-input"
|
|
273
|
-
}),
|
|
273
|
+
}), h = u.querySelector(
|
|
274
274
|
"input"
|
|
275
275
|
), g = this.createInput({
|
|
276
276
|
value: this.value,
|
|
@@ -279,15 +279,15 @@ class A extends S {
|
|
|
279
279
|
}), f = g.querySelector(
|
|
280
280
|
"input"
|
|
281
281
|
);
|
|
282
|
-
return
|
|
282
|
+
return h.oninput = (p) => {
|
|
283
283
|
var C;
|
|
284
|
-
let
|
|
285
|
-
|
|
284
|
+
let c = p.target.value.trim();
|
|
285
|
+
c.charAt(0) !== "#" && (c = "#" + c, h.value = c), o(h) && (this.value = c, (C = this.onChange) == null || C.call(this, c), f.value = c, r.style.backgroundColor = c);
|
|
286
286
|
}, f.oninput = (p) => {
|
|
287
287
|
var C;
|
|
288
|
-
let
|
|
289
|
-
|
|
290
|
-
}, s.appendChild(
|
|
288
|
+
let c = p.target.value;
|
|
289
|
+
c.charAt(0) !== "#" && (c = "#" + c, f.value = c), this.value = c, (C = this.onChange) == null || C.call(this, c), h.value = c, r.style.backgroundColor = c, o(h);
|
|
290
|
+
}, s.appendChild(r), s.appendChild(g), s.appendChild(u), t.appendChild(e), t.appendChild(s), t;
|
|
291
291
|
}
|
|
292
292
|
}
|
|
293
293
|
class w extends d {
|
|
@@ -298,8 +298,8 @@ class w extends d {
|
|
|
298
298
|
const t = (s) => {
|
|
299
299
|
this.props.minValue !== void 0 && (s.min = String(this.props.minValue)), this.props.maxValue !== void 0 && (s.max = String(this.props.maxValue)), this.props.className && s.classList.add(this.props.className), s.addEventListener("input", () => {
|
|
300
300
|
const a = this.props.minValue ?? Number.MIN_SAFE_INTEGER, o = this.props.maxValue ?? Number.MAX_SAFE_INTEGER;
|
|
301
|
-
let
|
|
302
|
-
|
|
301
|
+
let r = Number(s.value);
|
|
302
|
+
r < a && (r = a), r > o && (r = o), s.value = String(r);
|
|
303
303
|
});
|
|
304
304
|
}, e = this.createInput({
|
|
305
305
|
value: this.value,
|
|
@@ -321,7 +321,7 @@ class w extends d {
|
|
|
321
321
|
return n.className = "suffix-label", n.textContent = this.props.suffix, e.appendChild(n), e;
|
|
322
322
|
}
|
|
323
323
|
}
|
|
324
|
-
class
|
|
324
|
+
class A extends w {
|
|
325
325
|
constructor(t) {
|
|
326
326
|
super({
|
|
327
327
|
...t,
|
|
@@ -343,36 +343,46 @@ const V = `
|
|
|
343
343
|
`;
|
|
344
344
|
class j extends d {
|
|
345
345
|
constructor(t = {}) {
|
|
346
|
-
super(t), this.inputType = "select", this.
|
|
347
|
-
this.
|
|
348
|
-
|
|
349
|
-
|
|
346
|
+
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) => {
|
|
347
|
+
this._options.push(...e), this.selectNode && e.forEach((i, n) => {
|
|
348
|
+
const s = this._options.length - e.length + n;
|
|
349
|
+
this.selectNode.appendChild(this.createOption(i, s));
|
|
350
350
|
});
|
|
351
351
|
}).catch((e) => {
|
|
352
352
|
console.error("Failed to fetch async options:", e);
|
|
353
353
|
});
|
|
354
354
|
}
|
|
355
|
-
createOption(t) {
|
|
356
|
-
const
|
|
357
|
-
return
|
|
355
|
+
createOption(t, e) {
|
|
356
|
+
const i = document.createElement("option");
|
|
357
|
+
return i.value = String(e), i.textContent = t.name, i;
|
|
358
358
|
}
|
|
359
359
|
draw() {
|
|
360
|
-
var o, l;
|
|
361
360
|
const t = document.createElement("div");
|
|
362
|
-
t.classList.add("select-container")
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
361
|
+
if (t.classList.add("select-container"), this.props.icon || this.props.title) {
|
|
362
|
+
const i = document.createElement("div");
|
|
363
|
+
if (i.className = "icon-container", this.props.icon) {
|
|
364
|
+
const n = this.createIcon(this.props.icon);
|
|
365
|
+
i.appendChild(n);
|
|
366
|
+
}
|
|
367
|
+
if (this.props.title) {
|
|
368
|
+
const n = this.createLabel(this.props.title);
|
|
369
|
+
i.appendChild(n);
|
|
370
|
+
}
|
|
371
|
+
t.appendChild(i);
|
|
372
|
+
}
|
|
373
|
+
const e = document.createElement("select");
|
|
374
|
+
if (this.selectNode = e, e.classList.add("select"), this._options.forEach((i, n) => {
|
|
375
|
+
const s = this.createOption(i, n);
|
|
376
|
+
e.appendChild(s);
|
|
377
|
+
}), this.value !== void 0) {
|
|
378
|
+
const i = this._options.findIndex((n) => n.value === this.value);
|
|
379
|
+
i >= 0 && (e.value = String(i));
|
|
380
|
+
}
|
|
381
|
+
return e.onchange = (i) => {
|
|
382
|
+
var a;
|
|
383
|
+
const n = Number(i.target.value), s = this._options[n];
|
|
384
|
+
s && (this.value = s.value, (a = this.onChange) == null || a.call(this, this.value));
|
|
385
|
+
}, t.appendChild(e), t;
|
|
376
386
|
}
|
|
377
387
|
}
|
|
378
388
|
class Z extends d {
|
|
@@ -423,7 +433,7 @@ class Z extends d {
|
|
|
423
433
|
const a = document.createElement("button");
|
|
424
434
|
a.className = "align-option-button", a.innerHTML = s.icon, this.value === s.name && a.classList.add("selected"), a.addEventListener("click", () => {
|
|
425
435
|
var o;
|
|
426
|
-
i.querySelectorAll(".align-option-button").forEach((
|
|
436
|
+
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);
|
|
427
437
|
}), i.appendChild(a);
|
|
428
438
|
}), t.appendChild(i), t;
|
|
429
439
|
}
|
|
@@ -441,7 +451,7 @@ class U extends d {
|
|
|
441
451
|
return e.className = "button-setting-wrapper " + (this.props.wrapperClassName || ""), e.appendChild(t), e;
|
|
442
452
|
}
|
|
443
453
|
}
|
|
444
|
-
class
|
|
454
|
+
class _ extends d {
|
|
445
455
|
constructor(t = {}) {
|
|
446
456
|
super(t), this.inputType = { width: "number", height: "number" }, this.isUpdating = !1, this.value || (this.value = { width: 100, height: 100 }), this.locked = t.locked ?? !1, this.value.height === 0 && (this.value.height = 1), this.aspectRatio = this.value.width / this.value.height, this.widthSetting = new w({
|
|
447
457
|
title: "Width",
|
|
@@ -523,7 +533,7 @@ const T = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBo
|
|
|
523
533
|
<path d="M5 10.5L7.5 8M7.5 8L10 10.5M7.5 8V13.625M12.5 10.9643C13.2634 10.3338 13.75 9.37996 13.75 8.3125C13.75 6.41402 12.211 4.875 10.3125 4.875C10.1759 4.875 10.0482 4.80375 9.97882 4.68609C9.16379 3.30302 7.65902 2.375 5.9375 2.375C3.34867 2.375 1.25 4.47367 1.25 7.0625C1.25 8.35381 1.77215 9.52317 2.61684 10.371" stroke="#475467" stroke-linecap="round" stroke-linejoin="round"/>
|
|
524
534
|
</svg>
|
|
525
535
|
`;
|
|
526
|
-
class
|
|
536
|
+
class W extends d {
|
|
527
537
|
constructor(t = {}) {
|
|
528
538
|
super(t), this.inputType = "button", !this.value && t.defaultUrl && (this.value = t.defaultUrl);
|
|
529
539
|
}
|
|
@@ -545,10 +555,10 @@ class F extends d {
|
|
|
545
555
|
const s = (a = n.files) == null ? void 0 : a[0];
|
|
546
556
|
if (s) {
|
|
547
557
|
const o = new FileReader();
|
|
548
|
-
o.onload = (
|
|
549
|
-
var
|
|
550
|
-
const
|
|
551
|
-
this.value =
|
|
558
|
+
o.onload = (r) => {
|
|
559
|
+
var h, g;
|
|
560
|
+
const u = (h = r.target) == null ? void 0 : h.result;
|
|
561
|
+
this.value = u, e.src = u, (g = this.onChange) == null || g.call(this, u);
|
|
552
562
|
}, o.readAsDataURL(s);
|
|
553
563
|
}
|
|
554
564
|
}, t.appendChild(e), t.appendChild(i), t.appendChild(n), t;
|
|
@@ -557,15 +567,15 @@ class F extends d {
|
|
|
557
567
|
export {
|
|
558
568
|
Z as AlignSetting,
|
|
559
569
|
U as ButtonSetting,
|
|
560
|
-
|
|
561
|
-
|
|
570
|
+
O as ColorSetting,
|
|
571
|
+
_ as DimensionSetting,
|
|
562
572
|
B as MarginSettingGroup,
|
|
563
573
|
w as NumberSetting,
|
|
564
|
-
|
|
574
|
+
A as OpacitySetting,
|
|
565
575
|
j as SelectSetting,
|
|
566
576
|
d as Setting,
|
|
567
577
|
v as SettingGroup,
|
|
568
578
|
S as StringSetting,
|
|
569
|
-
|
|
579
|
+
W as UploadSetting,
|
|
570
580
|
k as iterateSettings
|
|
571
581
|
};
|
package/dist/index.d.ts
CHANGED
|
@@ -166,32 +166,26 @@ export declare class OpacitySetting extends NumberSetting {
|
|
|
166
166
|
export declare interface OpacitySettingProps extends NumberSettingsProps {
|
|
167
167
|
}
|
|
168
168
|
|
|
169
|
-
declare type Primitive = string | number | boolean | symbol | bigint | null | undefined;
|
|
169
|
+
export declare type Primitive = string | number | boolean | symbol | bigint | null | undefined;
|
|
170
170
|
|
|
171
|
-
export declare
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
171
|
+
export declare interface SelectOption {
|
|
172
|
+
name: string;
|
|
173
|
+
value: string | object;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
export declare class SelectSetting<T = any> extends Setting<T, SelectSettingProps<T>> {
|
|
177
|
+
inputType: T extends Primitive ? InputTypes : Record<keyof T, InputTypes>;
|
|
178
|
+
private _options;
|
|
179
|
+
private selectNode?;
|
|
180
|
+
constructor(props?: SelectSettingProps<T>);
|
|
181
|
+
private createOption;
|
|
179
182
|
draw(): HTMLElement;
|
|
180
183
|
}
|
|
181
184
|
|
|
182
|
-
export declare interface SelectSettingProps extends SettingProps<
|
|
183
|
-
options?:
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
}[];
|
|
187
|
-
getOptions?: () => {
|
|
188
|
-
value: string;
|
|
189
|
-
name: string;
|
|
190
|
-
}[];
|
|
191
|
-
getOptionsAsync?: () => Promise<{
|
|
192
|
-
value: string;
|
|
193
|
-
name: string;
|
|
194
|
-
}[]>;
|
|
185
|
+
export declare interface SelectSettingProps<T = any> extends SettingProps<T> {
|
|
186
|
+
options?: SelectOption[];
|
|
187
|
+
getOptions?: () => SelectOption[];
|
|
188
|
+
getOptionsAsync?: () => Promise<SelectOption[]>;
|
|
195
189
|
}
|
|
196
190
|
|
|
197
191
|
export declare abstract class Setting<T, P extends SettingProps<T>> implements IDrawable, IChangable<T> {
|
package/package.json
CHANGED