builder-settings-types 0.0.48 → 0.0.50
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 +8 -8
- package/dist/builder-settings-types.es.js +100 -98
- package/dist/index.css +1 -1
- package/dist/index.d.ts +6 -3
- package/package.json +2 -1
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const L="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";let f=(o=21)=>{let t="",e=crypto.getRandomValues(new Uint8Array(o|=0));for(;o--;)t+=L[e[o]&63];return t};function x(o,t){for(const e in o)if(o.hasOwnProperty(e)){const n=o[e];t(e,n)}}class k{setOnChange(t){this.onChange=t,x(this.settings,(e,n)=>{n.setOnChange(t)})}constructor(t){this.id=t.id||f(),this.title=t.title,this.settings=t.settings,Object.assign(this,t.settings)}draw(){const t=document.createElement("div");t.className="setting-group";const e=document.createElement("div");e.className="setting-group-title";const n=document.createElement("h3");n.textContent=this.title;const 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 b(o){switch(o){case"number":return 0;case"text":return"";case"select":return null;case"color":return"#000000";case"date":return new Date().toISOString().split("T")[0];case"button":return"";default:return""}}class g{constructor(t={}){this.props=t,this.id=t.id||f(),this.value=this.props.default,this.title=t.title||""}setOnChange(t){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||b(t.inputType)),s.type=t.inputType,s.placeholder=t.placeholder||"",s.className=t.inputClassName||"",s.oninput=i=>{const a=i.target;let c=a.value;t.inputType==="number"?c=Number(a.value):(t.inputType==="color"||t.inputType==="date")&&(c=a.value),this.value=c,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 u extends g{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,c=this.props.maxValue??Number.MAX_SAFE_INTEGER;let r=Number(i.value);r<a&&(r=a),r>c&&(r=c),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 E extends k{constructor(){super({title:"Margin",settings:{margin:new u({title:"Margin All"}),marginTop:new u({title:"Margin Top"}),marginRight:new u({title:"Margin Right"}),marginBottom:new u({title:"Margin Bottom"}),marginLeft:new u({title:"Margin Left"})}})}getCssCode(){return`
|
|
6
6
|
margin-botton: ${this.settings.marginBottom.value}px;
|
|
7
7
|
margin-top: ${this.settings.marginTop.value}px;
|
|
8
8
|
margin-right: ${this.settings.marginRight.value}px;
|
|
9
9
|
margin-left: ${this.settings.marginLeft.value}px;
|
|
10
|
-
`}}class N extends
|
|
10
|
+
`}}class N extends g{constructor(t={}){super(t),this.inputType="text"}draw(){const t=e=>{this.props.maxLength!==void 0&&(e.maxLength=this.props.maxLength),this.props.className&&e.classList.add(this.props.className)};return this.createInput({value:this.value,inputType:this.inputType,title:this.props.title,placeholder:this.props.placeholder,icon:this.props.icon,inputClassName:"string-setting-input "+(this.props.inputClassName||""),wrapperClassName:"string-setting-wrapper "+(this.props.wrapperClassName||""),inputCustomizer:t})}}const w="<svg xmlns='http://www.w3.org/2000/svg' width='18' height='19' viewBox='0 0 18 19' fill='none'><path d='M8.99999 15.8542C9.79613 16.5667 10.8475 17 12 17C14.4853 17 16.5 14.9853 16.5 12.5C16.5 10.4248 15.0953 8.67769 13.1849 8.15763M4.81513 8.15762C2.9047 8.67768 1.5 10.4248 1.5 12.5C1.5 14.9853 3.51472 17 6 17C8.48528 17 10.5 14.9853 10.5 12.5C10.5 11.9146 10.3882 11.3554 10.1849 10.8424M13.5 6.5C13.5 8.98528 11.4853 11 9 11C6.51472 11 4.5 8.98528 4.5 6.5C4.5 4.01472 6.51472 2 9 2C11.4853 2 13.5 4.01472 13.5 6.5Z' stroke='#667085' stroke-linecap='round' stroke-linejoin='round'/></svg>";class S extends N{constructor(t){super({...t,icon:t.icon||w,title:t.title||"Color"}),this.inputType="color"}draw(){const t=document.createElement("div");t.className="color-setting-wrapper";const e=document.createElement("div");e.className="icon-container";const n=this.createIcon(this.props.icon||w),s=this.createLabel(this.props.title||"Color");e.appendChild(n),e.appendChild(s);const i=document.createElement("div");i.className="color-input-wrapper";const a=/^([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/,c=p=>{const l=p.value.startsWith("#")?p.value.slice(1):p.value;return a.test(l)?(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 d=this.createInput({value:this.value,inputType:"text",inputClassName:"color-text-input"}),h=d.querySelector("input"),v=this.createInput({value:this.value,inputType:this.inputType,inputClassName:"color-picker"}),m=v.querySelector("input");return h.oninput=p=>{var C;let l=p.target.value.trim();l.charAt(0)!=="#"&&(l="#"+l,h.value=l),c(h)&&(this.value=l,(C=this.onChange)==null||C.call(this,l),m.value=l,r.style.backgroundColor=l)},m.oninput=p=>{var C;let l=p.target.value;l.charAt(0)!=="#"&&(l="#"+l,m.value=l),this.value=l,(C=this.onChange)==null||C.call(this,l),h.value=l,r.style.backgroundColor=l,c(h)},i.appendChild(r),i.appendChild(v),i.appendChild(d),t.appendChild(e),t.appendChild(i),t}}class M extends u{constructor(t){super({...t,minValue:0,maxValue:100,icon:t.icon||y,title:t.title||"Opacity"}),this.inputType="number"}}const y=`
|
|
11
11
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
12
12
|
<path d="M3.69749 15.365C3.54749 15.365 3.40502 15.305 3.30002 15.2C1.77752 13.6775 0.9375 11.6525 0.9375 9.5C0.9375 5.0525 4.5525 1.4375 9 1.4375C11.1525 1.4375 13.1775 2.2775 14.7 3.8C14.805 3.905 14.865 4.0475 14.865 4.1975C14.865 4.3475 14.805 4.49 14.7 4.595L4.09502 15.2C3.99002 15.305 3.84749 15.365 3.69749 15.365ZM9 2.5625C5.175 2.5625 2.0625 5.675 2.0625 9.5C2.0625 11.165 2.64751 12.74 3.71251 13.9925L13.4925 4.2125C12.24 3.1475 10.665 2.5625 9 2.5625Z" fill="#667085"/>
|
|
13
13
|
<path d="M9.00026 17.5623C6.84776 17.5623 4.82278 16.7223 3.30028 15.1998C3.19528 15.0948 3.13525 14.9523 3.13525 14.8023C3.13525 14.6523 3.19528 14.5098 3.30028 14.4048L13.9052 3.79984C14.1227 3.58234 14.4827 3.58234 14.7002 3.79984C16.2227 5.32234 17.0628 7.34734 17.0628 9.49984C17.0628 13.9473 13.4478 17.5623 9.00026 17.5623ZM4.50777 14.7873C5.76027 15.8523 7.33526 16.4373 9.00026 16.4373C12.8253 16.4373 15.9378 13.3248 15.9378 9.49984C15.9378 7.83484 15.3527 6.25984 14.2878 5.00734L4.50777 14.7873Z" fill="#667085"/>
|
|
14
14
|
</svg>
|
|
15
|
-
`;class
|
|
15
|
+
`;class T extends g{constructor(t={}){super(t),this.inputType="select",this.props.options||(this.props.options=[]),this.props.getOptionsAsync&&this.props.getOptionsAsync().then(e=>{this.props.options=[...this.props.options,...e],e.forEach(n=>{var 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 c,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=d=>{var h;this.value=d.target.value,(h=this.onChange)==null||h.call(this,d.target.value)},[...this.props.options||[],...((r=(c=this.props).getOptions)==null?void 0:r.call(c))||[]].forEach(d=>{const h=this.createOption(d);i.appendChild(h)}),this.value&&(i.value=this.value),e.appendChild(n),e.appendChild(s),t.appendChild(e),t.appendChild(i),t}}class V extends g{constructor(t={}){super(t),this.inputType="button",this.value||(this.value="center")}draw(){const t=document.createElement("div");t.className="align-setting-wrapper";const e=document.createElement("label");e.className="align-setting-label",e.textContent=this.title||"Align",t.appendChild(e);const n=document.createElement("div");return n.className="align-options-container",[{name:"left",icon:`
|
|
16
16
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
|
|
17
17
|
<path d="M10.5 7.5C11.1989 7.5 11.5484 7.5 11.824 7.38582C12.1916 7.23358 12.4836 6.94157 12.6358 6.57402C12.75 6.29837 12.75 5.94891 12.75 5.25C12.75 4.55109 12.75 4.20163 12.6358 3.92598C12.4836 3.55843 12.1916 3.26642 11.824 3.11418C11.5484 3 11.1989 3 10.5 3L4.5 3C3.80109 3 3.45163 3 3.17598 3.11418C2.80843 3.26642 2.51642 3.55843 2.36418 3.92597C2.25 4.20163 2.25 4.55109 2.25 5.25C2.25 5.94891 2.25 6.29837 2.36418 6.57402C2.51642 6.94157 2.80843 7.23358 3.17598 7.38582C3.45163 7.5 3.80109 7.5 4.5 7.5L10.5 7.5Z"
|
|
18
18
|
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
|
|
@@ -33,12 +33,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 c;n.querySelectorAll(".align-option-button").forEach(r=>r.classList.remove("selected")),a.classList.add("selected"),this.value=i.name,(c=this.onChange)==null||c.call(this,this.value)}),n.appendChild(a)}),t.appendChild(n),t}}class I extends g{constructor(t){super(t),this.inputType="button"}draw(){const t=document.createElement("button");t.className="button-setting "+(this.props.className||""),t.textContent=this.props.label,t.addEventListener("click",()=>{this.props.onClick&&this.props.onClick()});const e=document.createElement("div");return e.className="button-setting-wrapper "+(this.props.wrapperClassName||""),e.appendChild(t),e}}class H extends g{constructor(t={}){super(t),this.inputType={width:"number",height:"number"},this.isUpdating=!1,this.value||(this.value={width:100,height:100}),this.locked=t.locked??!1,this.value.height===0&&(this.value.height=1),this.aspectRatio=this.value.width/this.value.height,this.widthSetting=new u({title:"Width",default:this.value.width,suffix:"px",minValue:t.minWidth??1,maxValue:t.maxWidth,icon:O}),this.heightSetting=new u({title:"Height",default:this.value.height,suffix:"px",minValue:t.minHeight??1,maxValue:t.maxHeight,icon:R}),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 O=`<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>`,R=`<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=V;exports.ButtonSetting=I;exports.ColorSetting=S;exports.DimensionSetting=H;exports.MarginSettingGroup=E;exports.NumberSetting=u;exports.OpacitySetting=M;exports.SelectSetting=T;exports.Setting=g;exports.SettingGroup=k;exports.StringSetting=N;exports.iterateSettings=x;
|
|
@@ -1,18 +1,25 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
const x = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
|
|
2
|
+
let f = (o = 21) => {
|
|
3
|
+
let t = "", e = crypto.getRandomValues(new Uint8Array(o |= 0));
|
|
4
|
+
for (; o--; )
|
|
5
|
+
t += x[e[o] & 63];
|
|
6
|
+
return t;
|
|
7
|
+
};
|
|
8
|
+
function k(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 N {
|
|
9
16
|
setOnChange(t) {
|
|
10
|
-
this.onChange = t,
|
|
17
|
+
this.onChange = t, k(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 || f(), 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 L(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 || f(), 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 || L(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 c = a.value;
|
|
97
|
+
t.inputType === "number" ? c = Number(a.value) : (t.inputType === "color" || t.inputType === "date") && (c = a.value), this.value = c, 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, c = 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 > c && (r = c), 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 S extends N {
|
|
134
141
|
constructor() {
|
|
135
142
|
super({
|
|
136
143
|
title: "Margin",
|
|
@@ -152,59 +159,7 @@ class E extends f {
|
|
|
152
159
|
`;
|
|
153
160
|
}
|
|
154
161
|
}
|
|
155
|
-
class
|
|
156
|
-
constructor(t) {
|
|
157
|
-
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
|
-
}
|
|
159
|
-
// onChange?: (color: string) => void
|
|
160
|
-
draw() {
|
|
161
|
-
const t = document.createElement("div");
|
|
162
|
-
t.className = "color-setting-wrapper";
|
|
163
|
-
const e = document.createElement("div");
|
|
164
|
-
e.className = "icon-container";
|
|
165
|
-
const n = this.createIcon(this.icon), s = this.createLabel("Color");
|
|
166
|
-
e.appendChild(n), e.appendChild(s);
|
|
167
|
-
const i = document.createElement("div");
|
|
168
|
-
i.className = "color-input-wrapper";
|
|
169
|
-
let a, o;
|
|
170
|
-
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
|
-
a = this.createInput({
|
|
172
|
-
value: this.value,
|
|
173
|
-
inputType: "text",
|
|
174
|
-
inputClassName: "color-text-input",
|
|
175
|
-
inputCustomizer: (p) => {
|
|
176
|
-
p.oninput = (v) => {
|
|
177
|
-
var g;
|
|
178
|
-
let h = v.target.value.trim();
|
|
179
|
-
if (!d(p)) return;
|
|
180
|
-
this.value = h, (g = this.onChange) == null || g.call(this, h);
|
|
181
|
-
const m = document.getElementsByClassName(
|
|
182
|
-
"color-picker"
|
|
183
|
-
)[0];
|
|
184
|
-
m.value = h, c.style.backgroundColor = h;
|
|
185
|
-
};
|
|
186
|
-
}
|
|
187
|
-
}), o = this.createInput({
|
|
188
|
-
value: this.value,
|
|
189
|
-
inputType: this.inputType,
|
|
190
|
-
inputClassName: "color-picker",
|
|
191
|
-
inputCustomizer: (p) => {
|
|
192
|
-
p.oninput = (v) => {
|
|
193
|
-
var g;
|
|
194
|
-
let h = v.target.value;
|
|
195
|
-
this.value = h, (g = this.onChange) == null || g.call(this, h);
|
|
196
|
-
const m = document.getElementsByClassName(
|
|
197
|
-
"color-text-input"
|
|
198
|
-
)[0];
|
|
199
|
-
m.value = h, c.style.backgroundColor = h, d(m);
|
|
200
|
-
};
|
|
201
|
-
}
|
|
202
|
-
});
|
|
203
|
-
const c = document.createElement("div");
|
|
204
|
-
return c.className = "color-preview", c.style.backgroundColor = this.value || "", i.appendChild(c), i.appendChild(o), i.appendChild(a), t.appendChild(e), t.appendChild(i), t;
|
|
205
|
-
}
|
|
206
|
-
}
|
|
207
|
-
class M extends C {
|
|
162
|
+
class E extends C {
|
|
208
163
|
constructor(t = {}) {
|
|
209
164
|
super(t), this.inputType = "text";
|
|
210
165
|
}
|
|
@@ -224,24 +179,71 @@ class M extends C {
|
|
|
224
179
|
});
|
|
225
180
|
}
|
|
226
181
|
}
|
|
227
|
-
|
|
182
|
+
const w = "<svg xmlns='http://www.w3.org/2000/svg' width='18' height='19' viewBox='0 0 18 19' fill='none'><path d='M8.99999 15.8542C9.79613 16.5667 10.8475 17 12 17C14.4853 17 16.5 14.9853 16.5 12.5C16.5 10.4248 15.0953 8.67769 13.1849 8.15763M4.81513 8.15762C2.9047 8.67768 1.5 10.4248 1.5 12.5C1.5 14.9853 3.51472 17 6 17C8.48528 17 10.5 14.9853 10.5 12.5C10.5 11.9146 10.3882 11.3554 10.1849 10.8424M13.5 6.5C13.5 8.98528 11.4853 11 9 11C6.51472 11 4.5 8.98528 4.5 6.5C4.5 4.01472 6.51472 2 9 2C11.4853 2 13.5 4.01472 13.5 6.5Z' stroke='#667085' stroke-linecap='round' stroke-linejoin='round'/></svg>";
|
|
183
|
+
class T extends E {
|
|
184
|
+
constructor(t) {
|
|
185
|
+
super({
|
|
186
|
+
...t,
|
|
187
|
+
icon: t.icon || w,
|
|
188
|
+
title: t.title || "Color"
|
|
189
|
+
}), this.inputType = "color";
|
|
190
|
+
}
|
|
191
|
+
draw() {
|
|
192
|
+
const t = document.createElement("div");
|
|
193
|
+
t.className = "color-setting-wrapper";
|
|
194
|
+
const e = document.createElement("div");
|
|
195
|
+
e.className = "icon-container";
|
|
196
|
+
const n = this.createIcon(this.props.icon || w), s = this.createLabel(this.props.title || "Color");
|
|
197
|
+
e.appendChild(n), e.appendChild(s);
|
|
198
|
+
const i = document.createElement("div");
|
|
199
|
+
i.className = "color-input-wrapper";
|
|
200
|
+
const a = /^([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/, c = (p) => {
|
|
201
|
+
const l = p.value.startsWith("#") ? p.value.slice(1) : p.value;
|
|
202
|
+
return a.test(l) ? (p.style.border = "", !0) : (p.style.border = "1px solid red", !1);
|
|
203
|
+
}, r = document.createElement("div");
|
|
204
|
+
r.className = "color-preview", r.style.backgroundColor = this.value || "";
|
|
205
|
+
const d = this.createInput({
|
|
206
|
+
value: this.value,
|
|
207
|
+
inputType: "text",
|
|
208
|
+
inputClassName: "color-text-input"
|
|
209
|
+
}), h = d.querySelector(
|
|
210
|
+
"input"
|
|
211
|
+
), v = this.createInput({
|
|
212
|
+
value: this.value,
|
|
213
|
+
inputType: this.inputType,
|
|
214
|
+
inputClassName: "color-picker"
|
|
215
|
+
}), m = v.querySelector(
|
|
216
|
+
"input"
|
|
217
|
+
);
|
|
218
|
+
return h.oninput = (p) => {
|
|
219
|
+
var g;
|
|
220
|
+
let l = p.target.value.trim();
|
|
221
|
+
l.charAt(0) !== "#" && (l = "#" + l, h.value = l), c(h) && (this.value = l, (g = this.onChange) == null || g.call(this, l), m.value = l, r.style.backgroundColor = l);
|
|
222
|
+
}, m.oninput = (p) => {
|
|
223
|
+
var g;
|
|
224
|
+
let l = p.target.value;
|
|
225
|
+
l.charAt(0) !== "#" && (l = "#" + l, m.value = l), this.value = l, (g = this.onChange) == null || g.call(this, l), h.value = l, r.style.backgroundColor = l, c(h);
|
|
226
|
+
}, i.appendChild(r), i.appendChild(v), i.appendChild(d), t.appendChild(e), t.appendChild(i), t;
|
|
227
|
+
}
|
|
228
|
+
}
|
|
229
|
+
class V extends u {
|
|
228
230
|
constructor(t) {
|
|
229
231
|
super({
|
|
230
232
|
...t,
|
|
231
233
|
minValue: 0,
|
|
232
234
|
maxValue: 100,
|
|
233
|
-
icon:
|
|
235
|
+
icon: t.icon || b,
|
|
234
236
|
title: t.title || "Opacity"
|
|
235
237
|
}), this.inputType = "number";
|
|
236
238
|
}
|
|
237
239
|
}
|
|
238
|
-
const
|
|
240
|
+
const b = `
|
|
239
241
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
240
242
|
<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
243
|
<path d="M9.00026 17.5623C6.84776 17.5623 4.82278 16.7223 3.30028 15.1998C3.19528 15.0948 3.13525 14.9523 3.13525 14.8023C3.13525 14.6523 3.19528 14.5098 3.30028 14.4048L13.9052 3.79984C14.1227 3.58234 14.4827 3.58234 14.7002 3.79984C16.2227 5.32234 17.0628 7.34734 17.0628 9.49984C17.0628 13.9473 13.4478 17.5623 9.00026 17.5623ZM4.50777 14.7873C5.76027 15.8523 7.33526 16.4373 9.00026 16.4373C12.8253 16.4373 15.9378 13.3248 15.9378 9.49984C15.9378 7.83484 15.3527 6.25984 14.2878 5.00734L4.50777 14.7873Z" fill="#667085"/>
|
|
242
244
|
</svg>
|
|
243
245
|
`;
|
|
244
|
-
class
|
|
246
|
+
class I extends C {
|
|
245
247
|
constructor(t = {}) {
|
|
246
248
|
super(t), this.inputType = "select", this.props.options || (this.props.options = []), this.props.getOptionsAsync && this.props.getOptionsAsync().then((e) => {
|
|
247
249
|
this.props.options = [...this.props.options, ...e], e.forEach((n) => {
|
|
@@ -257,25 +259,25 @@ class S extends C {
|
|
|
257
259
|
return e.value = t.value, e.textContent = t.name, e;
|
|
258
260
|
}
|
|
259
261
|
draw() {
|
|
260
|
-
var
|
|
262
|
+
var c, r;
|
|
261
263
|
const t = document.createElement("div");
|
|
262
264
|
t.classList.add("select-container");
|
|
263
265
|
const e = document.createElement("div");
|
|
264
266
|
e.className = "icon-container";
|
|
265
267
|
const n = this.createIcon(this.props.icon || ""), s = this.createLabel(this.props.title || ""), i = document.createElement("select");
|
|
266
268
|
return this.selectNode = i, i.classList.add("select"), i.onchange = (d) => {
|
|
267
|
-
var
|
|
268
|
-
this.value = d.target.value, (
|
|
269
|
+
var h;
|
|
270
|
+
this.value = d.target.value, (h = this.onChange) == null || h.call(this, d.target.value);
|
|
269
271
|
}, [
|
|
270
272
|
...this.props.options || [],
|
|
271
|
-
...((r = (
|
|
273
|
+
...((r = (c = this.props).getOptions) == null ? void 0 : r.call(c)) || []
|
|
272
274
|
].forEach((d) => {
|
|
273
|
-
const
|
|
274
|
-
i.appendChild(
|
|
275
|
+
const h = this.createOption(d);
|
|
276
|
+
i.appendChild(h);
|
|
275
277
|
}), this.value && (i.value = this.value), e.appendChild(n), e.appendChild(s), t.appendChild(e), t.appendChild(i), t;
|
|
276
278
|
}
|
|
277
279
|
}
|
|
278
|
-
class
|
|
280
|
+
class H extends C {
|
|
279
281
|
constructor(t = {}) {
|
|
280
282
|
super(t), this.inputType = "button", this.value || (this.value = "center");
|
|
281
283
|
}
|
|
@@ -322,13 +324,13 @@ class T extends C {
|
|
|
322
324
|
].forEach((i) => {
|
|
323
325
|
const a = document.createElement("button");
|
|
324
326
|
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, (
|
|
327
|
+
var c;
|
|
328
|
+
n.querySelectorAll(".align-option-button").forEach((r) => r.classList.remove("selected")), a.classList.add("selected"), this.value = i.name, (c = this.onChange) == null || c.call(this, this.value);
|
|
327
329
|
}), n.appendChild(a);
|
|
328
330
|
}), t.appendChild(n), t;
|
|
329
331
|
}
|
|
330
332
|
}
|
|
331
|
-
class
|
|
333
|
+
class R extends C {
|
|
332
334
|
constructor(t) {
|
|
333
335
|
super(t), this.inputType = "button";
|
|
334
336
|
}
|
|
@@ -341,7 +343,7 @@ class V extends C {
|
|
|
341
343
|
return e.className = "button-setting-wrapper " + (this.props.wrapperClassName || ""), e.appendChild(t), e;
|
|
342
344
|
}
|
|
343
345
|
}
|
|
344
|
-
class
|
|
346
|
+
class O extends C {
|
|
345
347
|
constructor(t = {}) {
|
|
346
348
|
super(t), this.inputType = { width: "number", height: "number" }, this.isUpdating = !1, this.value || (this.value = { width: 100, height: 100 }), this.locked = t.locked ?? !1, this.value.height === 0 && (this.value.height = 1), this.aspectRatio = this.value.width / this.value.height, this.widthSetting = new u({
|
|
347
349
|
title: "Width",
|
|
@@ -350,7 +352,7 @@ class I extends C {
|
|
|
350
352
|
// Display "px" as the unit.
|
|
351
353
|
minValue: t.minWidth ?? 1,
|
|
352
354
|
maxValue: t.maxWidth,
|
|
353
|
-
icon:
|
|
355
|
+
icon: M
|
|
354
356
|
// SVG icon defined at the bottom.
|
|
355
357
|
}), this.heightSetting = new u({
|
|
356
358
|
title: "Height",
|
|
@@ -358,7 +360,7 @@ class I extends C {
|
|
|
358
360
|
suffix: "px",
|
|
359
361
|
minValue: t.minHeight ?? 1,
|
|
360
362
|
maxValue: t.maxHeight,
|
|
361
|
-
icon:
|
|
363
|
+
icon: y
|
|
362
364
|
}), this.widthSetting.setOnChange((e) => {
|
|
363
365
|
var i;
|
|
364
366
|
if (this.isUpdating || isNaN(e) || e < 1) return;
|
|
@@ -410,22 +412,22 @@ class I extends C {
|
|
|
410
412
|
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
413
|
}
|
|
412
414
|
}
|
|
413
|
-
const
|
|
415
|
+
const M = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
414
416
|
<path d="M4.5 9.5H13.5M4.5 9.5L6 7.25M4.5 9.5L6 11.75M13.5 9.5L12 7.25M13.5 9.5L12 11.75M15.75 16.25V2.75M2.25 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
415
|
-
</svg>`,
|
|
417
|
+
</svg>`, y = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
416
418
|
<path d="M9 14L9 5M9 14L6.75 12.5M9 14L11.25 12.5M9 5L6.75 6.5M9 5L11.25 6.5M15.75 2.75H2.25M15.75 16.25H2.25" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
|
|
417
419
|
</svg>`;
|
|
418
420
|
export {
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
421
|
+
H as AlignSetting,
|
|
422
|
+
R as ButtonSetting,
|
|
423
|
+
T as ColorSetting,
|
|
424
|
+
O as DimensionSetting,
|
|
425
|
+
S as MarginSettingGroup,
|
|
424
426
|
u as NumberSetting,
|
|
425
|
-
|
|
426
|
-
|
|
427
|
+
V as OpacitySetting,
|
|
428
|
+
I as SelectSetting,
|
|
427
429
|
C as Setting,
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
430
|
+
N as SettingGroup,
|
|
431
|
+
E as StringSetting,
|
|
432
|
+
k as iterateSettings
|
|
431
433
|
};
|
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}.
|
|
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}.string-setting-wrapper{display:flex;justify-content:space-between;align-items:center}.string-setting-input{max-width:120px;padding:8px;font-size:14px;border-radius:8px;color:var(--color-input-text);border:1px solid var(--color-border);background:var(--color-bg)}.color-setting-wrapper{display:flex;align-items:center;justify-content:space-between;gap:2px}.color-input-wrapper{position:relative;padding:8px 8px 8px 4px;width:120px;height:33px;display:flex;align-items:center;gap:4px;border:1px solid var(--color-border);border-radius:8px;background-color:var(--color-bg)}.color-text-input{border:none;outline:none;width:65px;color:var(--color-input-text);font-size:14px;text-align:center;background:transparent}.color-picker{position:absolute;left:0;top:0;width:25px;height:25px;opacity:0;cursor:pointer}.color-preview{width:25px;height:25px;border-radius:4px}.select-container{display:flex;align-items:center;gap:4px;justify-content:space-between}.select{width:120px;padding:8px;font-size:14px;border-radius:8px;border:1px solid var(--color-border);background:var(--color-bg);cursor:pointer}.select:focus{outline:none}.align-setting-wrapper{display:flex;align-items:center;justify-content:space-between}.align-setting-label{font-size:12px;color:var(--color-text)}.align-options-container{width:120px;color:#0006;background-color:#f5f6f7;border-radius:9999px;padding:4px 13px;display:flex;gap:8px}.align-option-button{display:flex;align-items:center;justify-content:center;width:26px;height:26px;background:transparent;border:none;cursor:pointer;border-radius:50%;transition:background-color .2s,color .2s}.align-option-button:hover{background-color:#fff}.align-option-button.selected{background-color:var(--color-white);color:var(--color-black)}.button-setting-wrapper{display:flex;justify-content:center}.button-setting{padding:8px 16px;background-color:var(--button-bg, #007bff);color:var(--button-color, #fff);border:none;border-radius:4px;cursor:pointer;font-size:14px}.button-setting:hover{background-color:var(--button-bg-hover, #0056b3)}.dimension-setting-container{display:flex;flex-direction:column;gap:8px;position:relative}.dimension-bracket{width:18px;height:42px;position:absolute;top:16px;right:122px;display:flex;align-items:center;justify-content:center}.dimension-bracket:before{content:"";position:absolute;width:13px;height:14px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15' fill='none'><path d='M14 1H5C2.79086 1 1 2.79086 1 5V15' stroke='%23667085'/></svg>") no-repeat center center;background-size:contain;top:0;right:1px}.dimension-bracket:after{content:"";position:absolute;width:13px;height:14px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15' fill='none'><path d='M14 14H5C2.79086 14 1 12.2091 1 10V4.76837e-07' stroke='%23667085'/></svg>") no-repeat center center;background-size:contain;bottom:0;right:1px}.dimension-lock-icon{width:24px;height:24px;background:none;cursor:pointer;display:inline-flex;align-items:center;color:#667085;z-index:1}.dimension-lock-icon:hover{color:#000}: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
|
@@ -23,14 +23,13 @@ export declare interface ButtonSettingProps extends SettingProps<void> {
|
|
|
23
23
|
wrapperClassName?: string;
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
export declare class ColorSetting extends
|
|
26
|
+
export declare class ColorSetting extends StringSetting {
|
|
27
27
|
inputType: InputTypes;
|
|
28
28
|
constructor(props: ColorSettingProps);
|
|
29
|
-
icon: string;
|
|
30
29
|
draw(): HTMLElement;
|
|
31
30
|
}
|
|
32
31
|
|
|
33
|
-
export declare interface ColorSettingProps extends
|
|
32
|
+
export declare interface ColorSettingProps extends StringSettingsProps {
|
|
34
33
|
}
|
|
35
34
|
|
|
36
35
|
/**
|
|
@@ -183,6 +182,7 @@ export declare interface SelectSettingProps extends SettingProps<string> {
|
|
|
183
182
|
export declare abstract class Setting<T, P extends SettingProps<T>> implements IDrawable, IChangable<T> {
|
|
184
183
|
protected props: P;
|
|
185
184
|
protected inputEl?: HTMLInputElement;
|
|
185
|
+
id: string;
|
|
186
186
|
value: T | undefined;
|
|
187
187
|
title: string | undefined;
|
|
188
188
|
abstract inputType: T extends Primitive ? InputTypes : Record<keyof T, InputTypes>;
|
|
@@ -199,6 +199,7 @@ export declare abstract class Setting<T, P extends SettingProps<T>> implements I
|
|
|
199
199
|
export declare class SettingGroup<T extends Record<string, Setting<any, any> | SettingGroup<any>>> implements IDrawable, IChangable<T> {
|
|
200
200
|
title: string;
|
|
201
201
|
settings: T;
|
|
202
|
+
id: string;
|
|
202
203
|
onChange?: ((value: T) => void) | undefined;
|
|
203
204
|
setOnChange(onChange: (value: T) => void): void;
|
|
204
205
|
constructor(groupProps: SettingGroupProps<T>);
|
|
@@ -208,6 +209,7 @@ export declare class SettingGroup<T extends Record<string, Setting<any, any> | S
|
|
|
208
209
|
export declare type SettingGroupProps<T> = {
|
|
209
210
|
title: string;
|
|
210
211
|
settings: T;
|
|
212
|
+
id?: string;
|
|
211
213
|
};
|
|
212
214
|
|
|
213
215
|
export declare interface SettingProps<T> {
|
|
@@ -216,6 +218,7 @@ export declare interface SettingProps<T> {
|
|
|
216
218
|
placeholder?: string;
|
|
217
219
|
icon?: string;
|
|
218
220
|
inputProps?: InputProps;
|
|
221
|
+
id?: string;
|
|
219
222
|
}
|
|
220
223
|
|
|
221
224
|
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.50",
|
|
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
|
}
|