builder-settings-types 0.0.48 → 0.0.49
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const k="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";let w=(o=21)=>{let t="",e=crypto.getRandomValues(new Uint8Array(o|=0));for(;o--;)t+=k[e[o]&63];return t};function f(o,t){for(const e in o)if(o.hasOwnProperty(e)){const n=o[e];t(e,n)}}class x{setOnChange(t){this.onChange=t,f(this.settings,(e,n)=>{n.setOnChange(t)})}constructor(t){this.id=t.id||w(),this.title=t.title,this.settings=t.settings,Object.assign(this,t.settings)}draw(){const t=document.createElement("div");t.className="setting-group";const e=document.createElement("div");e.className="setting-group-title";const n=document.createElement("h3");n.textContent=this.title;const s=document.createElement("span");s.className="setting-group-arrow",s.innerHTML=`
|
|
2
2
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
3
3
|
<path d="M5 7.5L10 12.5L15 7.5" stroke="#344054" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
4
|
</svg>
|
|
5
|
-
`;const i=document.createElement("div");i.className="setting-group-content";for(const a in this.settings){const r=this.settings[a].draw();i.appendChild(r)}return e.onclick=()=>{i.classList.toggle("collapsed"),s.classList.toggle("rotated")},e.appendChild(n),e.appendChild(s),t.appendChild(e),t.appendChild(i),t}}function
|
|
5
|
+
`;const i=document.createElement("div");i.className="setting-group-content";for(const a in this.settings){const r=this.settings[a].draw();i.appendChild(r)}return e.onclick=()=>{i.classList.toggle("collapsed"),s.classList.toggle("rotated")},e.appendChild(n),e.appendChild(s),t.appendChild(e),t.appendChild(i),t}}function N(o){switch(o){case"number":return 0;case"text":return"";case"select":return null;case"color":return"#000000";case"date":return new Date().toISOString().split("T")[0];case"button":return"";default:return""}}class d{constructor(t={}){this.props=t,this.id=t.id||w(),this.value=this.props.default,this.title=t.title||""}setOnChange(t){this.onChange=t}setValue(t){this.value=t,this.inputEl&&(this.inputEl.value=String(t)),this.onChange&&this.onChange(t)}createInput(t){t={...this.props.inputProps,...t};const e=document.createElement("div");if(e.className=t.wrapperClassName||"",t.title||t.icon){const i=document.createElement("div");if(i.className="icon-container",t.icon){const a=this.createIcon(t.icon,t.iconClassName);i.appendChild(a)}if(t.title){const a=this.createLabel(t.title,t.labelClassName);i.appendChild(a)}e.appendChild(i)}const n=document.createElement("div");n.className=t.wrapperClassName||"";const s=document.createElement("input");return this.inputEl=s,s.value=String(t.value||N(t.inputType)),s.type=t.inputType,s.placeholder=t.placeholder||"",s.className=t.inputClassName||"",s.oninput=i=>{const a=i.target;let l=a.value;t.inputType==="number"?l=Number(a.value):(t.inputType==="color"||t.inputType==="date")&&(l=a.value),this.value=l,this.onChange&&this.onChange(this.value)},t.inputCustomizer&&t.inputCustomizer(s),n.appendChild(s),e.appendChild(n),e}createLabel(t,e){const n=document.createElement("span");return n.textContent=t,n.className="input-label "+(e||""),n}createIcon(t,e){const n=document.createElement("span");return n.className="input-icon "+(e||""),n.innerHTML=t,n}}class p extends d{constructor(t={}){super(t),this.inputType="number"}draw(){const t=i=>{this.props.minValue!==void 0&&(i.min=String(this.props.minValue)),this.props.maxValue!==void 0&&(i.max=String(this.props.maxValue)),this.props.className&&i.classList.add(this.props.className),i.addEventListener("input",()=>{const a=this.props.minValue??Number.MIN_SAFE_INTEGER,l=this.props.maxValue??Number.MAX_SAFE_INTEGER;let r=Number(i.value);r<a&&(r=a),r>l&&(r=l),i.value=String(r)})},e=this.createInput({value:this.value,inputType:this.inputType,title:this.props.title,icon:this.props.icon,inputClassName:"number-setting-input "+(this.props.inputClassName||""),wrapperClassName:"number-setting-wrapper "+(this.props.wrapperClassName||""),inputCustomizer:t});if(!this.props.suffix||this.props.suffix==="none")return e;e.classList.add("suffix-wrapper");const n=e.querySelector("input.number-setting-input");n&&(n.style.paddingRight="35px");const s=document.createElement("span");return s.className="suffix-label",s.textContent=this.props.suffix,e.appendChild(s),e}}class L extends x{constructor(){super({title:"Margin",settings:{margin:new p({title:"Margin All"}),marginTop:new p({title:"Margin Top"}),marginRight:new p({title:"Margin Right"}),marginBottom:new p({title:"Margin Bottom"}),marginLeft:new p({title:"Margin Left"})}})}getCssCode(){return`
|
|
6
6
|
margin-botton: ${this.settings.marginBottom.value}px;
|
|
7
7
|
margin-top: ${this.settings.marginTop.value}px;
|
|
8
8
|
margin-right: ${this.settings.marginRight.value}px;
|
|
9
9
|
margin-left: ${this.settings.marginLeft.value}px;
|
|
10
|
-
`}}class
|
|
10
|
+
`}}class b extends d{constructor(t){super(t),this.inputType="color",this.icon="<svg xmlns='http://www.w3.org/2000/svg' width='18' height='19' viewBox='0 0 18 19' fill='none'><path d='M8.99999 15.8542C9.79613 16.5667 10.8475 17 12 17C14.4853 17 16.5 14.9853 16.5 12.5C16.5 10.4248 15.0953 8.67769 13.1849 8.15763M4.81513 8.15762C2.9047 8.67768 1.5 10.4248 1.5 12.5C1.5 14.9853 3.51472 17 6 17C8.48528 17 10.5 14.9853 10.5 12.5C10.5 11.9146 10.3882 11.3554 10.1849 10.8424M13.5 6.5C13.5 8.98528 11.4853 11 9 11C6.51472 11 4.5 8.98528 4.5 6.5C4.5 4.01472 6.51472 2 9 2C11.4853 2 13.5 4.01472 13.5 6.5Z' stroke='#667085' stroke-linecap='round' stroke-linejoin='round'/></svg>"}draw(){const t=document.createElement("div");t.className="color-setting-wrapper";const e=document.createElement("div");e.className="icon-container";const n=this.createIcon(this.icon),s=this.createLabel("Color");e.appendChild(n),e.appendChild(s);const i=document.createElement("div");i.className="color-input-wrapper";let a,l;const r=/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/,g=u=>r.test(u.value)?(u.style.border="",!0):(u.style.border="1px solid red",!1);a=this.createInput({value:this.value,inputType:"text",inputClassName:"color-text-input",inputCustomizer:u=>{u.oninput=v=>{var C;let h=v.target.value.trim();if(!g(u))return;this.value=h,(C=this.onChange)==null||C.call(this,h);const m=document.getElementsByClassName("color-picker")[0];m.value=h,c.style.backgroundColor=h}}}),l=this.createInput({value:this.value,inputType:this.inputType,inputClassName:"color-picker",inputCustomizer:u=>{u.oninput=v=>{var C;let h=v.target.value;this.value=h,(C=this.onChange)==null||C.call(this,h);const m=document.getElementsByClassName("color-text-input")[0];m.value=h,c.style.backgroundColor=h,g(m)}}});const c=document.createElement("div");return c.className="color-preview",c.style.backgroundColor=this.value||"",i.appendChild(c),i.appendChild(l),i.appendChild(a),t.appendChild(e),t.appendChild(i),t}}class E extends d{constructor(t={}){super(t),this.inputType="text"}draw(){const t=e=>{this.props.maxLength!==void 0&&(e.maxLength=this.props.maxLength),this.props.className&&e.classList.add(this.props.className)};return this.createInput({value:this.value,inputType:this.inputType,title:this.props.title,placeholder:this.props.placeholder,icon:this.props.icon,inputClassName:"string-setting-input "+(this.props.inputClassName||""),wrapperClassName:"string-setting-wrapper "+(this.props.wrapperClassName||""),inputCustomizer:t})}}class S extends p{constructor(t){super({...t,minValue:0,maxValue:100,icon:M,title:t.title||"Opacity"}),this.inputType="number"}}const M=`
|
|
11
11
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
12
12
|
<path d="M3.69749 15.365C3.54749 15.365 3.40502 15.305 3.30002 15.2C1.77752 13.6775 0.9375 11.6525 0.9375 9.5C0.9375 5.0525 4.5525 1.4375 9 1.4375C11.1525 1.4375 13.1775 2.2775 14.7 3.8C14.805 3.905 14.865 4.0475 14.865 4.1975C14.865 4.3475 14.805 4.49 14.7 4.595L4.09502 15.2C3.99002 15.305 3.84749 15.365 3.69749 15.365ZM9 2.5625C5.175 2.5625 2.0625 5.675 2.0625 9.5C2.0625 11.165 2.64751 12.74 3.71251 13.9925L13.4925 4.2125C12.24 3.1475 10.665 2.5625 9 2.5625Z" fill="#667085"/>
|
|
13
13
|
<path d="M9.00026 17.5623C6.84776 17.5623 4.82278 16.7223 3.30028 15.1998C3.19528 15.0948 3.13525 14.9523 3.13525 14.8023C3.13525 14.6523 3.19528 14.5098 3.30028 14.4048L13.9052 3.79984C14.1227 3.58234 14.4827 3.58234 14.7002 3.79984C16.2227 5.32234 17.0628 7.34734 17.0628 9.49984C17.0628 13.9473 13.4478 17.5623 9.00026 17.5623ZM4.50777 14.7873C5.76027 15.8523 7.33526 16.4373 9.00026 16.4373C12.8253 16.4373 15.9378 13.3248 15.9378 9.49984C15.9378 7.83484 15.3527 6.25984 14.2878 5.00734L4.50777 14.7873Z" fill="#667085"/>
|
|
14
14
|
</svg>
|
|
15
|
-
`;class
|
|
15
|
+
`;class y extends d{constructor(t={}){super(t),this.inputType="select",this.props.options||(this.props.options=[]),this.props.getOptionsAsync&&this.props.getOptionsAsync().then(e=>{this.props.options=[...this.props.options,...e],e.forEach(n=>{var s;(s=this.selectNode)==null||s.appendChild(this.createOption(n))})}).catch(e=>{console.error("Failed to fetch async options:",e)})}createOption(t){const e=document.createElement("option");return e.value=t.value,e.textContent=t.name,e}draw(){var l,r;const t=document.createElement("div");t.classList.add("select-container");const e=document.createElement("div");e.className="icon-container";const n=this.createIcon(this.props.icon||""),s=this.createLabel(this.props.title||""),i=document.createElement("select");return this.selectNode=i,i.classList.add("select"),i.onchange=g=>{var c;this.value=g.target.value,(c=this.onChange)==null||c.call(this,g.target.value)},[...this.props.options||[],...((r=(l=this.props).getOptions)==null?void 0:r.call(l))||[]].forEach(g=>{const c=this.createOption(g);i.appendChild(c)}),this.value&&(i.value=this.value),e.appendChild(n),e.appendChild(s),t.appendChild(e),t.appendChild(i),t}}class T extends d{constructor(t={}){super(t),this.inputType="button",this.value||(this.value="center")}draw(){const t=document.createElement("div");t.className="align-setting-wrapper";const e=document.createElement("label");e.className="align-setting-label",e.textContent=this.title||"Align",t.appendChild(e);const n=document.createElement("div");return n.className="align-options-container",[{name:"left",icon:`
|
|
16
16
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
|
|
17
17
|
<path d="M10.5 7.5C11.1989 7.5 11.5484 7.5 11.824 7.38582C12.1916 7.23358 12.4836 6.94157 12.6358 6.57402C12.75 6.29837 12.75 5.94891 12.75 5.25C12.75 4.55109 12.75 4.20163 12.6358 3.92598C12.4836 3.55843 12.1916 3.26642 11.824 3.11418C11.5484 3 11.1989 3 10.5 3L4.5 3C3.80109 3 3.45163 3 3.17598 3.11418C2.80843 3.26642 2.51642 3.55843 2.36418 3.92597C2.25 4.20163 2.25 4.55109 2.25 5.25C2.25 5.94891 2.25 6.29837 2.36418 6.57402C2.51642 6.94157 2.80843 7.23358 3.17598 7.38582C3.45163 7.5 3.80109 7.5 4.5 7.5L10.5 7.5Z"
|
|
18
18
|
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
@@ -33,12 +33,12 @@
|
|
|
33
33
|
<path d="M13.5 15C14.1989 15 14.5484 15 14.824 14.8858C15.1916 14.7336 15.4836 14.4416 15.6358 14.074C15.75 13.7984 15.75 13.4489 15.75 12.75C15.75 12.0511 15.75 11.7016 15.6358 11.426C15.4836 11.0584 15.1916 10.7664 14.824 10.6142C14.5484 10.5 14.1989 10.5 13.5 10.5H4.5C3.80109 10.5 3.45163 10.5 3.17598 10.6142C2.80843 10.7664 2.51642 11.0584 2.36418 11.426C2.25 11.7016 2.25 12.0511 2.25 12.75C2.25 13.4489 2.25 13.7984 2.36418 14.074C2.51642 14.4416 2.80843 14.7336 3.17597 14.8858C3.45163 15 3.80109 15 4.5 15L13.5 15Z"
|
|
34
34
|
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
35
35
|
</svg>
|
|
36
|
-
`}].forEach(i=>{const a=document.createElement("button");a.className="align-option-button",a.innerHTML=i.icon,this.value===i.name&&a.classList.add("selected"),a.addEventListener("click",()=>{var
|
|
36
|
+
`}].forEach(i=>{const a=document.createElement("button");a.className="align-option-button",a.innerHTML=i.icon,this.value===i.name&&a.classList.add("selected"),a.addEventListener("click",()=>{var l;n.querySelectorAll(".align-option-button").forEach(r=>r.classList.remove("selected")),a.classList.add("selected"),this.value=i.name,(l=this.onChange)==null||l.call(this,this.value)}),n.appendChild(a)}),t.appendChild(n),t}}class V extends d{constructor(t){super(t),this.inputType="button"}draw(){const t=document.createElement("button");t.className="button-setting "+(this.props.className||""),t.textContent=this.props.label,t.addEventListener("click",()=>{this.props.onClick&&this.props.onClick()});const e=document.createElement("div");return e.className="button-setting-wrapper "+(this.props.wrapperClassName||""),e.appendChild(t),e}}class I extends d{constructor(t={}){super(t),this.inputType={width:"number",height:"number"},this.isUpdating=!1,this.value||(this.value={width:100,height:100}),this.locked=t.locked??!1,this.value.height===0&&(this.value.height=1),this.aspectRatio=this.value.width/this.value.height,this.widthSetting=new p({title:"Width",default:this.value.width,suffix:"px",minValue:t.minWidth??1,maxValue:t.maxWidth,icon:H}),this.heightSetting=new p({title:"Height",default:this.value.height,suffix:"px",minValue:t.minHeight??1,maxValue:t.maxHeight,icon:O}),this.widthSetting.setOnChange(e=>{var i;if(this.isUpdating||isNaN(e)||e<1)return;this.isUpdating=!0;let n=e,s=this.value.height;this.locked&&isFinite(this.aspectRatio)&&!isNaN(this.aspectRatio)&&(s=Math.round(n/this.aspectRatio),s<1&&(s=1)),this.value={width:n,height:s},s!==0&&(this.aspectRatio=n/s),(i=this.onChange)==null||i.call(this,this.value),this.heightSetting.setValue(s),this.isUpdating=!1}),this.heightSetting.setOnChange(e=>{var i;if(this.isUpdating||isNaN(e)||e<1)return;this.isUpdating=!0;let n=e,s=this.value.width;this.locked&&isFinite(this.aspectRatio)&&!isNaN(this.aspectRatio)&&(s=Math.round(n*this.aspectRatio),s<1&&(s=1)),this.value={width:s,height:n},n!==0&&(this.aspectRatio=s/n),(i=this.onChange)==null||i.call(this,this.value),this.widthSetting.setValue(s),this.isUpdating=!1})}toggleLock(t){if(this.locked=!this.locked,this.locked){const e=this.value.width,n=this.value.height;n!==0&&(this.aspectRatio=e/n)}t.innerHTML=this.getLockSVG(this.locked)}getLockSVG(t){return`
|
|
37
37
|
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none">
|
|
38
38
|
<path d="M2.91663 4.58333V3.33333C2.91663 2.18274 3.84937 1.25 4.99996 1.25C6.00786 1.25 6.84859 1.96573 7.04162 2.91667M3.66663 8.75H6.33329C7.03336 8.75 7.38339 8.75 7.65078 8.61376C7.88598 8.49392 8.07721 8.30269 8.19705 8.06749C8.33329 7.8001 8.33329 7.45007 8.33329 6.75V6.58333C8.33329 5.88327 8.33329 5.53323 8.19705 5.26584C8.07721 5.03064 7.88598 4.83942 7.65078 4.71958C7.38339 4.58333 7.03336 4.58333 6.33329 4.58333H3.66663C2.96656 4.58333 2.61653 4.58333 2.34914 4.71958C2.11394 4.83942 1.92271 5.03064 1.80287 5.26584C1.66663 5.53323 1.66663 5.88327 1.66663 6.58333V6.75C1.66663 7.45007 1.66663 7.8001 1.80287 8.06749C1.92271 8.30269 2.11394 8.49392 2.34914 8.61376C2.61653 8.75 2.96656 8.75 3.66663 8.75Z" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
39
39
|
</svg>
|
|
40
|
-
`}draw(){const t=document.createElement("div");t.className="dimension-setting-container";const e=this.widthSetting.draw(),n=this.heightSetting.draw(),s=document.createElement("div");s.className="dimension-bracket";const i=document.createElement("span");return i.className="dimension-lock-icon",i.innerHTML=this.getLockSVG(this.locked),i.onclick=()=>this.toggleLock(i),s.appendChild(i),t.appendChild(e),t.appendChild(s),t.appendChild(n),t}}const
|
|
40
|
+
`}draw(){const t=document.createElement("div");t.className="dimension-setting-container";const e=this.widthSetting.draw(),n=this.heightSetting.draw(),s=document.createElement("div");s.className="dimension-bracket";const i=document.createElement("span");return i.className="dimension-lock-icon",i.innerHTML=this.getLockSVG(this.locked),i.onclick=()=>this.toggleLock(i),s.appendChild(i),t.appendChild(e),t.appendChild(s),t.appendChild(n),t}}const H=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
41
41
|
<path d="M4.5 9.5H13.5M4.5 9.5L6 7.25M4.5 9.5L6 11.75M13.5 9.5L12 7.25M13.5 9.5L12 11.75M15.75 16.25V2.75M2.25 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
42
|
-
</svg>`,
|
|
42
|
+
</svg>`,O=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
43
43
|
<path d="M9 14L9 5M9 14L6.75 12.5M9 14L11.25 12.5M9 5L6.75 6.5M9 5L11.25 6.5M15.75 2.75H2.25M15.75 16.25H2.25" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
44
|
-
</svg>`;exports.AlignSetting=
|
|
44
|
+
</svg>`;exports.AlignSetting=T;exports.ButtonSetting=V;exports.ColorSetting=b;exports.DimensionSetting=I;exports.MarginSettingGroup=L;exports.NumberSetting=p;exports.OpacitySetting=S;exports.SelectSetting=y;exports.Setting=d;exports.SettingGroup=x;exports.StringSetting=E;exports.iterateSettings=f;
|
|
@@ -1,18 +1,25 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
const f = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
|
|
2
|
+
let w = (o = 21) => {
|
|
3
|
+
let t = "", e = crypto.getRandomValues(new Uint8Array(o |= 0));
|
|
4
|
+
for (; o--; )
|
|
5
|
+
t += f[e[o] & 63];
|
|
6
|
+
return t;
|
|
7
|
+
};
|
|
8
|
+
function x(o, t) {
|
|
9
|
+
for (const e in o)
|
|
10
|
+
if (o.hasOwnProperty(e)) {
|
|
11
|
+
const n = o[e];
|
|
5
12
|
t(e, n);
|
|
6
13
|
}
|
|
7
14
|
}
|
|
8
|
-
class
|
|
15
|
+
class k {
|
|
9
16
|
setOnChange(t) {
|
|
10
|
-
this.onChange = t,
|
|
17
|
+
this.onChange = t, x(this.settings, (e, n) => {
|
|
11
18
|
n.setOnChange(t);
|
|
12
19
|
});
|
|
13
20
|
}
|
|
14
21
|
constructor(t) {
|
|
15
|
-
this.title = t.title, this.settings = t.settings, Object.assign(this, t.settings);
|
|
22
|
+
this.id = t.id || w(), this.title = t.title, this.settings = t.settings, Object.assign(this, t.settings);
|
|
16
23
|
}
|
|
17
24
|
draw() {
|
|
18
25
|
const t = document.createElement("div");
|
|
@@ -38,8 +45,8 @@ class f {
|
|
|
38
45
|
}, e.appendChild(n), e.appendChild(s), t.appendChild(e), t.appendChild(i), t;
|
|
39
46
|
}
|
|
40
47
|
}
|
|
41
|
-
function
|
|
42
|
-
switch (
|
|
48
|
+
function N(o) {
|
|
49
|
+
switch (o) {
|
|
43
50
|
case "number":
|
|
44
51
|
return 0;
|
|
45
52
|
case "text":
|
|
@@ -58,7 +65,7 @@ function x(l) {
|
|
|
58
65
|
}
|
|
59
66
|
class C {
|
|
60
67
|
constructor(t = {}) {
|
|
61
|
-
this.props = t, this.value = this.props.default, this.title = t.title || "";
|
|
68
|
+
this.props = t, this.id = t.id || w(), this.value = this.props.default, this.title = t.title || "";
|
|
62
69
|
}
|
|
63
70
|
setOnChange(t) {
|
|
64
71
|
this.onChange = t;
|
|
@@ -84,10 +91,10 @@ class C {
|
|
|
84
91
|
const n = document.createElement("div");
|
|
85
92
|
n.className = t.wrapperClassName || "";
|
|
86
93
|
const s = document.createElement("input");
|
|
87
|
-
return this.inputEl = s, s.value = String(t.value ||
|
|
94
|
+
return this.inputEl = s, s.value = String(t.value || N(t.inputType)), s.type = t.inputType, s.placeholder = t.placeholder || "", s.className = t.inputClassName || "", s.oninput = (i) => {
|
|
88
95
|
const a = i.target;
|
|
89
|
-
let
|
|
90
|
-
t.inputType === "number" ?
|
|
96
|
+
let l = a.value;
|
|
97
|
+
t.inputType === "number" ? l = Number(a.value) : (t.inputType === "color" || t.inputType === "date") && (l = a.value), this.value = l, this.onChange && this.onChange(this.value);
|
|
91
98
|
}, t.inputCustomizer && t.inputCustomizer(s), n.appendChild(s), e.appendChild(n), e;
|
|
92
99
|
}
|
|
93
100
|
createLabel(t, e) {
|
|
@@ -106,9 +113,9 @@ class u extends C {
|
|
|
106
113
|
draw() {
|
|
107
114
|
const t = (i) => {
|
|
108
115
|
this.props.minValue !== void 0 && (i.min = String(this.props.minValue)), this.props.maxValue !== void 0 && (i.max = String(this.props.maxValue)), this.props.className && i.classList.add(this.props.className), i.addEventListener("input", () => {
|
|
109
|
-
const a = this.props.minValue ?? Number.MIN_SAFE_INTEGER,
|
|
116
|
+
const a = this.props.minValue ?? Number.MIN_SAFE_INTEGER, l = this.props.maxValue ?? Number.MAX_SAFE_INTEGER;
|
|
110
117
|
let r = Number(i.value);
|
|
111
|
-
r < a && (r = a), r >
|
|
118
|
+
r < a && (r = a), r > l && (r = l), i.value = String(r);
|
|
112
119
|
});
|
|
113
120
|
}, e = this.createInput({
|
|
114
121
|
value: this.value,
|
|
@@ -130,7 +137,7 @@ class u extends C {
|
|
|
130
137
|
return s.className = "suffix-label", s.textContent = this.props.suffix, e.appendChild(s), e;
|
|
131
138
|
}
|
|
132
139
|
}
|
|
133
|
-
class
|
|
140
|
+
class M extends k {
|
|
134
141
|
constructor() {
|
|
135
142
|
super({
|
|
136
143
|
title: "Margin",
|
|
@@ -152,7 +159,7 @@ class E extends f {
|
|
|
152
159
|
`;
|
|
153
160
|
}
|
|
154
161
|
}
|
|
155
|
-
class
|
|
162
|
+
class y extends C {
|
|
156
163
|
constructor(t) {
|
|
157
164
|
super(t), this.inputType = "color", this.icon = "<svg xmlns='http://www.w3.org/2000/svg' width='18' height='19' viewBox='0 0 18 19' fill='none'><path d='M8.99999 15.8542C9.79613 16.5667 10.8475 17 12 17C14.4853 17 16.5 14.9853 16.5 12.5C16.5 10.4248 15.0953 8.67769 13.1849 8.15763M4.81513 8.15762C2.9047 8.67768 1.5 10.4248 1.5 12.5C1.5 14.9853 3.51472 17 6 17C8.48528 17 10.5 14.9853 10.5 12.5C10.5 11.9146 10.3882 11.3554 10.1849 10.8424M13.5 6.5C13.5 8.98528 11.4853 11 9 11C6.51472 11 4.5 8.98528 4.5 6.5C4.5 4.01472 6.51472 2 9 2C11.4853 2 13.5 4.01472 13.5 6.5Z' stroke='#667085' stroke-linecap='round' stroke-linejoin='round'/></svg>";
|
|
158
165
|
}
|
|
@@ -166,7 +173,7 @@ class b extends C {
|
|
|
166
173
|
e.appendChild(n), e.appendChild(s);
|
|
167
174
|
const i = document.createElement("div");
|
|
168
175
|
i.className = "color-input-wrapper";
|
|
169
|
-
let a,
|
|
176
|
+
let a, l;
|
|
170
177
|
const r = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/, d = (p) => r.test(p.value) ? (p.style.border = "", !0) : (p.style.border = "1px solid red", !1);
|
|
171
178
|
a = this.createInput({
|
|
172
179
|
value: this.value,
|
|
@@ -184,7 +191,7 @@ class b extends C {
|
|
|
184
191
|
m.value = h, c.style.backgroundColor = h;
|
|
185
192
|
};
|
|
186
193
|
}
|
|
187
|
-
}),
|
|
194
|
+
}), l = this.createInput({
|
|
188
195
|
value: this.value,
|
|
189
196
|
inputType: this.inputType,
|
|
190
197
|
inputClassName: "color-picker",
|
|
@@ -201,10 +208,10 @@ class b extends C {
|
|
|
201
208
|
}
|
|
202
209
|
});
|
|
203
210
|
const c = document.createElement("div");
|
|
204
|
-
return c.className = "color-preview", c.style.backgroundColor = this.value || "", i.appendChild(c), i.appendChild(
|
|
211
|
+
return c.className = "color-preview", c.style.backgroundColor = this.value || "", i.appendChild(c), i.appendChild(l), i.appendChild(a), t.appendChild(e), t.appendChild(i), t;
|
|
205
212
|
}
|
|
206
213
|
}
|
|
207
|
-
class
|
|
214
|
+
class S extends C {
|
|
208
215
|
constructor(t = {}) {
|
|
209
216
|
super(t), this.inputType = "text";
|
|
210
217
|
}
|
|
@@ -224,24 +231,24 @@ class M extends C {
|
|
|
224
231
|
});
|
|
225
232
|
}
|
|
226
233
|
}
|
|
227
|
-
class
|
|
234
|
+
class T extends u {
|
|
228
235
|
constructor(t) {
|
|
229
236
|
super({
|
|
230
237
|
...t,
|
|
231
238
|
minValue: 0,
|
|
232
239
|
maxValue: 100,
|
|
233
|
-
icon:
|
|
240
|
+
icon: L,
|
|
234
241
|
title: t.title || "Opacity"
|
|
235
242
|
}), this.inputType = "number";
|
|
236
243
|
}
|
|
237
244
|
}
|
|
238
|
-
const
|
|
245
|
+
const L = `
|
|
239
246
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
240
247
|
<path d="M3.69749 15.365C3.54749 15.365 3.40502 15.305 3.30002 15.2C1.77752 13.6775 0.9375 11.6525 0.9375 9.5C0.9375 5.0525 4.5525 1.4375 9 1.4375C11.1525 1.4375 13.1775 2.2775 14.7 3.8C14.805 3.905 14.865 4.0475 14.865 4.1975C14.865 4.3475 14.805 4.49 14.7 4.595L4.09502 15.2C3.99002 15.305 3.84749 15.365 3.69749 15.365ZM9 2.5625C5.175 2.5625 2.0625 5.675 2.0625 9.5C2.0625 11.165 2.64751 12.74 3.71251 13.9925L13.4925 4.2125C12.24 3.1475 10.665 2.5625 9 2.5625Z" fill="#667085"/>
|
|
241
248
|
<path d="M9.00026 17.5623C6.84776 17.5623 4.82278 16.7223 3.30028 15.1998C3.19528 15.0948 3.13525 14.9523 3.13525 14.8023C3.13525 14.6523 3.19528 14.5098 3.30028 14.4048L13.9052 3.79984C14.1227 3.58234 14.4827 3.58234 14.7002 3.79984C16.2227 5.32234 17.0628 7.34734 17.0628 9.49984C17.0628 13.9473 13.4478 17.5623 9.00026 17.5623ZM4.50777 14.7873C5.76027 15.8523 7.33526 16.4373 9.00026 16.4373C12.8253 16.4373 15.9378 13.3248 15.9378 9.49984C15.9378 7.83484 15.3527 6.25984 14.2878 5.00734L4.50777 14.7873Z" fill="#667085"/>
|
|
242
249
|
</svg>
|
|
243
250
|
`;
|
|
244
|
-
class
|
|
251
|
+
class V extends C {
|
|
245
252
|
constructor(t = {}) {
|
|
246
253
|
super(t), this.inputType = "select", this.props.options || (this.props.options = []), this.props.getOptionsAsync && this.props.getOptionsAsync().then((e) => {
|
|
247
254
|
this.props.options = [...this.props.options, ...e], e.forEach((n) => {
|
|
@@ -257,7 +264,7 @@ class S extends C {
|
|
|
257
264
|
return e.value = t.value, e.textContent = t.name, e;
|
|
258
265
|
}
|
|
259
266
|
draw() {
|
|
260
|
-
var
|
|
267
|
+
var l, r;
|
|
261
268
|
const t = document.createElement("div");
|
|
262
269
|
t.classList.add("select-container");
|
|
263
270
|
const e = document.createElement("div");
|
|
@@ -268,14 +275,14 @@ class S extends C {
|
|
|
268
275
|
this.value = d.target.value, (c = this.onChange) == null || c.call(this, d.target.value);
|
|
269
276
|
}, [
|
|
270
277
|
...this.props.options || [],
|
|
271
|
-
...((r = (
|
|
278
|
+
...((r = (l = this.props).getOptions) == null ? void 0 : r.call(l)) || []
|
|
272
279
|
].forEach((d) => {
|
|
273
280
|
const c = this.createOption(d);
|
|
274
281
|
i.appendChild(c);
|
|
275
282
|
}), this.value && (i.value = this.value), e.appendChild(n), e.appendChild(s), t.appendChild(e), t.appendChild(i), t;
|
|
276
283
|
}
|
|
277
284
|
}
|
|
278
|
-
class
|
|
285
|
+
class I extends C {
|
|
279
286
|
constructor(t = {}) {
|
|
280
287
|
super(t), this.inputType = "button", this.value || (this.value = "center");
|
|
281
288
|
}
|
|
@@ -322,13 +329,13 @@ class T extends C {
|
|
|
322
329
|
].forEach((i) => {
|
|
323
330
|
const a = document.createElement("button");
|
|
324
331
|
a.className = "align-option-button", a.innerHTML = i.icon, this.value === i.name && a.classList.add("selected"), a.addEventListener("click", () => {
|
|
325
|
-
var
|
|
326
|
-
n.querySelectorAll(".align-option-button").forEach((r) => r.classList.remove("selected")), a.classList.add("selected"), this.value = i.name, (
|
|
332
|
+
var l;
|
|
333
|
+
n.querySelectorAll(".align-option-button").forEach((r) => r.classList.remove("selected")), a.classList.add("selected"), this.value = i.name, (l = this.onChange) == null || l.call(this, this.value);
|
|
327
334
|
}), n.appendChild(a);
|
|
328
335
|
}), t.appendChild(n), t;
|
|
329
336
|
}
|
|
330
337
|
}
|
|
331
|
-
class
|
|
338
|
+
class H extends C {
|
|
332
339
|
constructor(t) {
|
|
333
340
|
super(t), this.inputType = "button";
|
|
334
341
|
}
|
|
@@ -341,7 +348,7 @@ class V extends C {
|
|
|
341
348
|
return e.className = "button-setting-wrapper " + (this.props.wrapperClassName || ""), e.appendChild(t), e;
|
|
342
349
|
}
|
|
343
350
|
}
|
|
344
|
-
class
|
|
351
|
+
class R extends C {
|
|
345
352
|
constructor(t = {}) {
|
|
346
353
|
super(t), this.inputType = { width: "number", height: "number" }, this.isUpdating = !1, this.value || (this.value = { width: 100, height: 100 }), this.locked = t.locked ?? !1, this.value.height === 0 && (this.value.height = 1), this.aspectRatio = this.value.width / this.value.height, this.widthSetting = new u({
|
|
347
354
|
title: "Width",
|
|
@@ -350,7 +357,7 @@ class I extends C {
|
|
|
350
357
|
// Display "px" as the unit.
|
|
351
358
|
minValue: t.minWidth ?? 1,
|
|
352
359
|
maxValue: t.maxWidth,
|
|
353
|
-
icon:
|
|
360
|
+
icon: E
|
|
354
361
|
// SVG icon defined at the bottom.
|
|
355
362
|
}), this.heightSetting = new u({
|
|
356
363
|
title: "Height",
|
|
@@ -358,7 +365,7 @@ class I extends C {
|
|
|
358
365
|
suffix: "px",
|
|
359
366
|
minValue: t.minHeight ?? 1,
|
|
360
367
|
maxValue: t.maxHeight,
|
|
361
|
-
icon:
|
|
368
|
+
icon: b
|
|
362
369
|
}), this.widthSetting.setOnChange((e) => {
|
|
363
370
|
var i;
|
|
364
371
|
if (this.isUpdating || isNaN(e) || e < 1) return;
|
|
@@ -410,22 +417,22 @@ class I extends C {
|
|
|
410
417
|
return i.className = "dimension-lock-icon", i.innerHTML = this.getLockSVG(this.locked), i.onclick = () => this.toggleLock(i), s.appendChild(i), t.appendChild(e), t.appendChild(s), t.appendChild(n), t;
|
|
411
418
|
}
|
|
412
419
|
}
|
|
413
|
-
const
|
|
420
|
+
const E = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
414
421
|
<path d="M4.5 9.5H13.5M4.5 9.5L6 7.25M4.5 9.5L6 11.75M13.5 9.5L12 7.25M13.5 9.5L12 11.75M15.75 16.25V2.75M2.25 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
415
|
-
</svg>`,
|
|
422
|
+
</svg>`, b = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
416
423
|
<path d="M9 14L9 5M9 14L6.75 12.5M9 14L11.25 12.5M9 5L6.75 6.5M9 5L11.25 6.5M15.75 2.75H2.25M15.75 16.25H2.25" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
417
424
|
</svg>`;
|
|
418
425
|
export {
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
426
|
+
I as AlignSetting,
|
|
427
|
+
H as ButtonSetting,
|
|
428
|
+
y as ColorSetting,
|
|
429
|
+
R as DimensionSetting,
|
|
430
|
+
M as MarginSettingGroup,
|
|
424
431
|
u as NumberSetting,
|
|
425
|
-
|
|
426
|
-
|
|
432
|
+
T as OpacitySetting,
|
|
433
|
+
V as SelectSetting,
|
|
427
434
|
C as Setting,
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
435
|
+
k as SettingGroup,
|
|
436
|
+
S as StringSetting,
|
|
437
|
+
x as iterateSettings
|
|
431
438
|
};
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";.setting-group{padding:16px;display:flex;flex-direction:column;gap:8px;border-bottom:solid 1px var(--color-border);border-radius:8px;background-color:var(--color-bg)}.setting-group .setting-group{background-color:var(--color-white)!important;padding:12px;border-bottom:unset;border:1px solid var(--color-border-secondary);box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808}.setting-group-title{display:flex;align-items:center;justify-content:space-between;cursor:pointer}.setting-group-title h3{font-size:14px;font-weight:700;line-height:24px}.setting-group-arrow{display:flex;transition:transform .3s ease-in-out}.setting-group-arrow.rotated{transform:rotate(180deg)}.setting-group-content{display:flex;flex-direction:column;gap:8px;max-height:500px;opacity:1;transition:max-height .5s ease-in-out,opacity .4s ease-in-out}.setting-group-content.collapsed{max-height:0;opacity:0}.icon-container{display:flex;align-items:center;gap:4px}.input-icon{display:flex;align-items:center;justify-content:center;color:var(--color-text)}.input-label{color:var(--color-text)}.input-container{display:inline-flex;align-items:center;position:relative}.with-suffix{flex:1;padding-right:36px}.input-suffix{position:absolute;right:8px;top:50%;transform:translateY(-50%);color:#666;pointer-events:none;font-size:.9em}.number-setting-wrapper{display:flex;align-items:center;justify-content:space-between}.number-setting-input{width:120px;padding:8px;font-size:14px;border-radius:8px;color:var(--color-input-text);border:1px solid var(--color-border);background:var(--color-bg);box-sizing:border-box}.suffix-wrapper{position:relative;display:inline-flex;align-items:center}.suffix-label{position:absolute;right:8px;padding-left:8px;top:50%;transform:translateY(-50%);border-left:1px solid var(--color-divider);font-size:12px;color:var(--color-text)}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.color-setting-wrapper{display:flex;align-items:center;justify-content:space-between;gap:2px}.color-input-wrapper{position:relative;padding:8px 8px 8px 4px;width:120px;height:33px;display:flex;align-items:center;gap:4px;border:1px solid var(--color-border);border-radius:8px;background-color:var(--color-bg)}.color-text-input{border:none;outline:none;width:65px;color:var(--color-input-text);font-size:14px;text-align:center;background:transparent}.color-picker{position:absolute;left:0;top:0;width:25px;height:25px;opacity:0;cursor:pointer}.color-preview{width:25px;height:25px;border-radius:4px}.string-setting-wrapper{display:flex;justify-content:space-between;align-items:center}.string-setting-input{max-width:120px;padding:8px;font-size:14px;border-radius:8px;color:var(--color-input-text);border:1px solid var(--color-border);background:var(--color-bg)}.select-container{display:flex;align-items:center;gap:4px;justify-content:space-between}.select{width:120px;padding:8px;font-size:14px;border-radius:8px;border:1px solid var(--color-border);background:var(--color-bg);cursor:pointer}.select:focus{outline:none}.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;
|
|
1
|
+
@import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";.setting-group{padding:16px;display:flex;flex-direction:column;gap:8px;border-bottom:solid 1px var(--color-border);border-radius:8px;background-color:var(--color-bg)}.setting-group .setting-group{background-color:var(--color-white)!important;padding:12px;border-bottom:unset;border:1px solid var(--color-border-secondary);box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808}.setting-group-title{display:flex;align-items:center;justify-content:space-between;cursor:pointer}.setting-group-title h3{font-size:14px;font-weight:700;line-height:24px}.setting-group-arrow{display:flex;transition:transform .3s ease-in-out}.setting-group-arrow.rotated{transform:rotate(180deg)}.setting-group-content{display:flex;flex-direction:column;gap:8px;max-height:500px;opacity:1;transition:max-height .5s ease-in-out,opacity .4s ease-in-out}.setting-group-content.collapsed{max-height:0;opacity:0}.icon-container{display:flex;align-items:center;gap:4px}.input-icon{display:flex;align-items:center;justify-content:center;color:var(--color-text)}.input-label{color:var(--color-text)}.input-container{display:inline-flex;align-items:center;position:relative}.with-suffix{flex:1;padding-right:36px}.input-suffix{position:absolute;right:8px;top:50%;transform:translateY(-50%);color:#666;pointer-events:none;font-size:.9em}.number-setting-wrapper{display:flex;align-items:center;justify-content:space-between}.number-setting-input{width:120px;padding:8px;font-size:14px;border-radius:8px;color:var(--color-input-text);border:1px solid var(--color-border);background:var(--color-bg);box-sizing:border-box}.suffix-wrapper{position:relative;display:inline-flex;align-items:center}.suffix-label{position:absolute;right:8px;padding-left:8px;top:50%;transform:translateY(-50%);border-left:1px solid var(--color-divider);font-size:12px;color:var(--color-text)}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.color-setting-wrapper{display:flex;align-items:center;justify-content:space-between;gap:2px}.color-input-wrapper{position:relative;padding:8px 8px 8px 4px;width:120px;height:33px;display:flex;align-items:center;gap:4px;border:1px solid var(--color-border);border-radius:8px;background-color:var(--color-bg)}.color-text-input{border:none;outline:none;width:65px;color:var(--color-input-text);font-size:14px;text-align:center;background:transparent}.color-picker{position:absolute;left:0;top:0;width:25px;height:25px;opacity:0;cursor:pointer}.color-preview{width:25px;height:25px;border-radius:4px}.string-setting-wrapper{display:flex;justify-content:space-between;align-items:center}.string-setting-input{max-width:120px;padding:8px;font-size:14px;border-radius:8px;color:var(--color-input-text);border:1px solid var(--color-border);background:var(--color-bg)}.select-container{display:flex;align-items:center;gap:4px;justify-content:space-between}.select{width:120px;padding:8px;font-size:14px;border-radius:8px;border:1px solid var(--color-border);background:var(--color-bg);cursor:pointer}.select:focus{outline:none}.align-setting-wrapper{display:flex;align-items:center;justify-content:space-between}.align-setting-label{font-size:12px;color:var(--color-text)}.align-options-container{width:120px;color:#0006;background-color:#f5f6f7;border-radius:9999px;padding:4px 13px;display:flex;gap:8px}.align-option-button{display:flex;align-items:center;justify-content:center;width:26px;height:26px;background:transparent;border:none;cursor:pointer;border-radius:50%;transition:background-color .2s,color .2s}.align-option-button:hover{background-color:#fff}.align-option-button.selected{background-color:var(--color-white);color:var(--color-black)}.button-setting-wrapper{display:flex;justify-content:center}.button-setting{padding:8px 16px;background-color:var(--button-bg, #007bff);color:var(--button-color, #fff);border:none;border-radius:4px;cursor:pointer;font-size:14px}.button-setting:hover{background-color:var(--button-bg-hover, #0056b3)}.dimension-setting-container{display:flex;flex-direction:column;gap:8px;position:relative}.dimension-bracket{width:18px;height:42px;position:absolute;top:16px;right:122px;display:flex;align-items:center;justify-content:center}.dimension-bracket:before{content:"";position:absolute;width:13px;height:14px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15' fill='none'><path d='M14 1H5C2.79086 1 1 2.79086 1 5V15' stroke='%23667085'/></svg>") no-repeat center center;background-size:contain;top:0;right:1px}.dimension-bracket:after{content:"";position:absolute;width:13px;height:14px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15' fill='none'><path d='M14 14H5C2.79086 14 1 12.2091 1 10V4.76837e-07' stroke='%23667085'/></svg>") no-repeat center center;background-size:contain;bottom:0;right:1px}.dimension-lock-icon{width:24px;height:24px;background:none;cursor:pointer;display:inline-flex;align-items:center;color:#667085;z-index:1}.dimension-lock-icon:hover{color:#000}:root{--color-border: #d0d5dd;--color-bg: #f8f8f8;--color-border-secondary: #eaecf0;--color-text: #667085;--color-title: #344054;--color-input-text: #292b2e;--color-white: #fff;--color-black: #000;--color-divider: #dcdcdc}*{padding:0;margin:0;border:none}*,*:before,*:after{box-sizing:border-box}a,a:link,a:visited,a:hover{text-decoration:none}body{font-family:Inter,serif;font-weight:400;font-size:12px;line-height:18px}aside,nav,footer,header,section,main{display:block}h1,h2,h3,h4,h5,h6,p{font-size:inherit;font-weight:inherit}ul,ul li{list-style:none}img{vertical-align:top}img,svg{max-width:100%;height:auto}address{font-style:normal}input,textarea,button,select{font-family:inherit;font-size:inherit;color:inherit;background-color:transparent}input::-ms-clear{display:none}button,input[type=submit]{display:inline-block;box-shadow:none;background-color:transparent;background:none;cursor:pointer}input:focus,input:active,button:focus,button:active{outline:none}button::-moz-focus-inner{padding:0;border:0}label{cursor:pointer}legend{display:block}
|
package/dist/index.d.ts
CHANGED
|
@@ -183,6 +183,7 @@ export declare interface SelectSettingProps extends SettingProps<string> {
|
|
|
183
183
|
export declare abstract class Setting<T, P extends SettingProps<T>> implements IDrawable, IChangable<T> {
|
|
184
184
|
protected props: P;
|
|
185
185
|
protected inputEl?: HTMLInputElement;
|
|
186
|
+
id: string;
|
|
186
187
|
value: T | undefined;
|
|
187
188
|
title: string | undefined;
|
|
188
189
|
abstract inputType: T extends Primitive ? InputTypes : Record<keyof T, InputTypes>;
|
|
@@ -199,6 +200,7 @@ export declare abstract class Setting<T, P extends SettingProps<T>> implements I
|
|
|
199
200
|
export declare class SettingGroup<T extends Record<string, Setting<any, any> | SettingGroup<any>>> implements IDrawable, IChangable<T> {
|
|
200
201
|
title: string;
|
|
201
202
|
settings: T;
|
|
203
|
+
id: string;
|
|
202
204
|
onChange?: ((value: T) => void) | undefined;
|
|
203
205
|
setOnChange(onChange: (value: T) => void): void;
|
|
204
206
|
constructor(groupProps: SettingGroupProps<T>);
|
|
@@ -208,6 +210,7 @@ export declare class SettingGroup<T extends Record<string, Setting<any, any> | S
|
|
|
208
210
|
export declare type SettingGroupProps<T> = {
|
|
209
211
|
title: string;
|
|
210
212
|
settings: T;
|
|
213
|
+
id?: string;
|
|
211
214
|
};
|
|
212
215
|
|
|
213
216
|
export declare interface SettingProps<T> {
|
|
@@ -216,6 +219,7 @@ export declare interface SettingProps<T> {
|
|
|
216
219
|
placeholder?: string;
|
|
217
220
|
icon?: string;
|
|
218
221
|
inputProps?: InputProps;
|
|
222
|
+
id?: string;
|
|
219
223
|
}
|
|
220
224
|
|
|
221
225
|
export declare class StringSetting extends Setting<string, StringSettingsProps> {
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "builder-settings-types",
|
|
3
3
|
"description": "builder settings",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.49",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/builder-settings-types.cjs.js",
|
|
7
7
|
"module": "dist/builder-settings-types.es.js",
|
|
@@ -30,6 +30,7 @@
|
|
|
30
30
|
"license": "MIT",
|
|
31
31
|
"author": "onAim",
|
|
32
32
|
"dependencies": {
|
|
33
|
+
"nanoid": "^5.1.0",
|
|
33
34
|
"vite-plugin-dts": "^4.5.0"
|
|
34
35
|
}
|
|
35
36
|
}
|