builder-settings-types 0.0.49 → 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.
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const 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
|
|
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,25 +1,25 @@
|
|
|
1
|
-
const
|
|
2
|
-
let
|
|
1
|
+
const x = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
|
|
2
|
+
let f = (o = 21) => {
|
|
3
3
|
let t = "", e = crypto.getRandomValues(new Uint8Array(o |= 0));
|
|
4
4
|
for (; o--; )
|
|
5
|
-
t +=
|
|
5
|
+
t += x[e[o] & 63];
|
|
6
6
|
return t;
|
|
7
7
|
};
|
|
8
|
-
function
|
|
8
|
+
function k(o, t) {
|
|
9
9
|
for (const e in o)
|
|
10
10
|
if (o.hasOwnProperty(e)) {
|
|
11
11
|
const n = o[e];
|
|
12
12
|
t(e, n);
|
|
13
13
|
}
|
|
14
14
|
}
|
|
15
|
-
class
|
|
15
|
+
class N {
|
|
16
16
|
setOnChange(t) {
|
|
17
|
-
this.onChange = t,
|
|
17
|
+
this.onChange = t, k(this.settings, (e, n) => {
|
|
18
18
|
n.setOnChange(t);
|
|
19
19
|
});
|
|
20
20
|
}
|
|
21
21
|
constructor(t) {
|
|
22
|
-
this.id = t.id ||
|
|
22
|
+
this.id = t.id || f(), this.title = t.title, this.settings = t.settings, Object.assign(this, t.settings);
|
|
23
23
|
}
|
|
24
24
|
draw() {
|
|
25
25
|
const t = document.createElement("div");
|
|
@@ -45,7 +45,7 @@ class k {
|
|
|
45
45
|
}, e.appendChild(n), e.appendChild(s), t.appendChild(e), t.appendChild(i), t;
|
|
46
46
|
}
|
|
47
47
|
}
|
|
48
|
-
function
|
|
48
|
+
function L(o) {
|
|
49
49
|
switch (o) {
|
|
50
50
|
case "number":
|
|
51
51
|
return 0;
|
|
@@ -65,7 +65,7 @@ function N(o) {
|
|
|
65
65
|
}
|
|
66
66
|
class C {
|
|
67
67
|
constructor(t = {}) {
|
|
68
|
-
this.props = t, this.id = t.id ||
|
|
68
|
+
this.props = t, this.id = t.id || f(), this.value = this.props.default, this.title = t.title || "";
|
|
69
69
|
}
|
|
70
70
|
setOnChange(t) {
|
|
71
71
|
this.onChange = t;
|
|
@@ -91,10 +91,10 @@ class C {
|
|
|
91
91
|
const n = document.createElement("div");
|
|
92
92
|
n.className = t.wrapperClassName || "";
|
|
93
93
|
const s = document.createElement("input");
|
|
94
|
-
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) => {
|
|
95
95
|
const a = i.target;
|
|
96
|
-
let
|
|
97
|
-
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);
|
|
98
98
|
}, t.inputCustomizer && t.inputCustomizer(s), n.appendChild(s), e.appendChild(n), e;
|
|
99
99
|
}
|
|
100
100
|
createLabel(t, e) {
|
|
@@ -113,9 +113,9 @@ class u extends C {
|
|
|
113
113
|
draw() {
|
|
114
114
|
const t = (i) => {
|
|
115
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", () => {
|
|
116
|
-
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;
|
|
117
117
|
let r = Number(i.value);
|
|
118
|
-
r < a && (r = a), r >
|
|
118
|
+
r < a && (r = a), r > c && (r = c), i.value = String(r);
|
|
119
119
|
});
|
|
120
120
|
}, e = this.createInput({
|
|
121
121
|
value: this.value,
|
|
@@ -137,7 +137,7 @@ class u extends C {
|
|
|
137
137
|
return s.className = "suffix-label", s.textContent = this.props.suffix, e.appendChild(s), e;
|
|
138
138
|
}
|
|
139
139
|
}
|
|
140
|
-
class
|
|
140
|
+
class S extends N {
|
|
141
141
|
constructor() {
|
|
142
142
|
super({
|
|
143
143
|
title: "Margin",
|
|
@@ -159,59 +159,7 @@ class M extends k {
|
|
|
159
159
|
`;
|
|
160
160
|
}
|
|
161
161
|
}
|
|
162
|
-
class
|
|
163
|
-
constructor(t) {
|
|
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>";
|
|
165
|
-
}
|
|
166
|
-
// onChange?: (color: string) => void
|
|
167
|
-
draw() {
|
|
168
|
-
const t = document.createElement("div");
|
|
169
|
-
t.className = "color-setting-wrapper";
|
|
170
|
-
const e = document.createElement("div");
|
|
171
|
-
e.className = "icon-container";
|
|
172
|
-
const n = this.createIcon(this.icon), s = this.createLabel("Color");
|
|
173
|
-
e.appendChild(n), e.appendChild(s);
|
|
174
|
-
const i = document.createElement("div");
|
|
175
|
-
i.className = "color-input-wrapper";
|
|
176
|
-
let a, l;
|
|
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);
|
|
178
|
-
a = this.createInput({
|
|
179
|
-
value: this.value,
|
|
180
|
-
inputType: "text",
|
|
181
|
-
inputClassName: "color-text-input",
|
|
182
|
-
inputCustomizer: (p) => {
|
|
183
|
-
p.oninput = (v) => {
|
|
184
|
-
var g;
|
|
185
|
-
let h = v.target.value.trim();
|
|
186
|
-
if (!d(p)) return;
|
|
187
|
-
this.value = h, (g = this.onChange) == null || g.call(this, h);
|
|
188
|
-
const m = document.getElementsByClassName(
|
|
189
|
-
"color-picker"
|
|
190
|
-
)[0];
|
|
191
|
-
m.value = h, c.style.backgroundColor = h;
|
|
192
|
-
};
|
|
193
|
-
}
|
|
194
|
-
}), l = this.createInput({
|
|
195
|
-
value: this.value,
|
|
196
|
-
inputType: this.inputType,
|
|
197
|
-
inputClassName: "color-picker",
|
|
198
|
-
inputCustomizer: (p) => {
|
|
199
|
-
p.oninput = (v) => {
|
|
200
|
-
var g;
|
|
201
|
-
let h = v.target.value;
|
|
202
|
-
this.value = h, (g = this.onChange) == null || g.call(this, h);
|
|
203
|
-
const m = document.getElementsByClassName(
|
|
204
|
-
"color-text-input"
|
|
205
|
-
)[0];
|
|
206
|
-
m.value = h, c.style.backgroundColor = h, d(m);
|
|
207
|
-
};
|
|
208
|
-
}
|
|
209
|
-
});
|
|
210
|
-
const c = document.createElement("div");
|
|
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;
|
|
212
|
-
}
|
|
213
|
-
}
|
|
214
|
-
class S extends C {
|
|
162
|
+
class E extends C {
|
|
215
163
|
constructor(t = {}) {
|
|
216
164
|
super(t), this.inputType = "text";
|
|
217
165
|
}
|
|
@@ -231,24 +179,71 @@ class S extends C {
|
|
|
231
179
|
});
|
|
232
180
|
}
|
|
233
181
|
}
|
|
234
|
-
|
|
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 {
|
|
235
230
|
constructor(t) {
|
|
236
231
|
super({
|
|
237
232
|
...t,
|
|
238
233
|
minValue: 0,
|
|
239
234
|
maxValue: 100,
|
|
240
|
-
icon:
|
|
235
|
+
icon: t.icon || b,
|
|
241
236
|
title: t.title || "Opacity"
|
|
242
237
|
}), this.inputType = "number";
|
|
243
238
|
}
|
|
244
239
|
}
|
|
245
|
-
const
|
|
240
|
+
const b = `
|
|
246
241
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
247
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"/>
|
|
248
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"/>
|
|
249
244
|
</svg>
|
|
250
245
|
`;
|
|
251
|
-
class
|
|
246
|
+
class I extends C {
|
|
252
247
|
constructor(t = {}) {
|
|
253
248
|
super(t), this.inputType = "select", this.props.options || (this.props.options = []), this.props.getOptionsAsync && this.props.getOptionsAsync().then((e) => {
|
|
254
249
|
this.props.options = [...this.props.options, ...e], e.forEach((n) => {
|
|
@@ -264,25 +259,25 @@ class V extends C {
|
|
|
264
259
|
return e.value = t.value, e.textContent = t.name, e;
|
|
265
260
|
}
|
|
266
261
|
draw() {
|
|
267
|
-
var
|
|
262
|
+
var c, r;
|
|
268
263
|
const t = document.createElement("div");
|
|
269
264
|
t.classList.add("select-container");
|
|
270
265
|
const e = document.createElement("div");
|
|
271
266
|
e.className = "icon-container";
|
|
272
267
|
const n = this.createIcon(this.props.icon || ""), s = this.createLabel(this.props.title || ""), i = document.createElement("select");
|
|
273
268
|
return this.selectNode = i, i.classList.add("select"), i.onchange = (d) => {
|
|
274
|
-
var
|
|
275
|
-
this.value = d.target.value, (
|
|
269
|
+
var h;
|
|
270
|
+
this.value = d.target.value, (h = this.onChange) == null || h.call(this, d.target.value);
|
|
276
271
|
}, [
|
|
277
272
|
...this.props.options || [],
|
|
278
|
-
...((r = (
|
|
273
|
+
...((r = (c = this.props).getOptions) == null ? void 0 : r.call(c)) || []
|
|
279
274
|
].forEach((d) => {
|
|
280
|
-
const
|
|
281
|
-
i.appendChild(
|
|
275
|
+
const h = this.createOption(d);
|
|
276
|
+
i.appendChild(h);
|
|
282
277
|
}), this.value && (i.value = this.value), e.appendChild(n), e.appendChild(s), t.appendChild(e), t.appendChild(i), t;
|
|
283
278
|
}
|
|
284
279
|
}
|
|
285
|
-
class
|
|
280
|
+
class H extends C {
|
|
286
281
|
constructor(t = {}) {
|
|
287
282
|
super(t), this.inputType = "button", this.value || (this.value = "center");
|
|
288
283
|
}
|
|
@@ -329,13 +324,13 @@ class I extends C {
|
|
|
329
324
|
].forEach((i) => {
|
|
330
325
|
const a = document.createElement("button");
|
|
331
326
|
a.className = "align-option-button", a.innerHTML = i.icon, this.value === i.name && a.classList.add("selected"), a.addEventListener("click", () => {
|
|
332
|
-
var
|
|
333
|
-
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);
|
|
334
329
|
}), n.appendChild(a);
|
|
335
330
|
}), t.appendChild(n), t;
|
|
336
331
|
}
|
|
337
332
|
}
|
|
338
|
-
class
|
|
333
|
+
class R extends C {
|
|
339
334
|
constructor(t) {
|
|
340
335
|
super(t), this.inputType = "button";
|
|
341
336
|
}
|
|
@@ -348,7 +343,7 @@ class H extends C {
|
|
|
348
343
|
return e.className = "button-setting-wrapper " + (this.props.wrapperClassName || ""), e.appendChild(t), e;
|
|
349
344
|
}
|
|
350
345
|
}
|
|
351
|
-
class
|
|
346
|
+
class O extends C {
|
|
352
347
|
constructor(t = {}) {
|
|
353
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({
|
|
354
349
|
title: "Width",
|
|
@@ -357,7 +352,7 @@ class R extends C {
|
|
|
357
352
|
// Display "px" as the unit.
|
|
358
353
|
minValue: t.minWidth ?? 1,
|
|
359
354
|
maxValue: t.maxWidth,
|
|
360
|
-
icon:
|
|
355
|
+
icon: M
|
|
361
356
|
// SVG icon defined at the bottom.
|
|
362
357
|
}), this.heightSetting = new u({
|
|
363
358
|
title: "Height",
|
|
@@ -365,7 +360,7 @@ class R extends C {
|
|
|
365
360
|
suffix: "px",
|
|
366
361
|
minValue: t.minHeight ?? 1,
|
|
367
362
|
maxValue: t.maxHeight,
|
|
368
|
-
icon:
|
|
363
|
+
icon: y
|
|
369
364
|
}), this.widthSetting.setOnChange((e) => {
|
|
370
365
|
var i;
|
|
371
366
|
if (this.isUpdating || isNaN(e) || e < 1) return;
|
|
@@ -417,22 +412,22 @@ class R extends C {
|
|
|
417
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;
|
|
418
413
|
}
|
|
419
414
|
}
|
|
420
|
-
const
|
|
415
|
+
const M = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
421
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"/>
|
|
422
|
-
</svg>`,
|
|
417
|
+
</svg>`, y = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
423
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"/>
|
|
424
419
|
</svg>`;
|
|
425
420
|
export {
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
421
|
+
H as AlignSetting,
|
|
422
|
+
R as ButtonSetting,
|
|
423
|
+
T as ColorSetting,
|
|
424
|
+
O as DimensionSetting,
|
|
425
|
+
S as MarginSettingGroup,
|
|
431
426
|
u as NumberSetting,
|
|
432
|
-
|
|
433
|
-
|
|
427
|
+
V as OpacitySetting,
|
|
428
|
+
I as SelectSetting,
|
|
434
429
|
C as Setting,
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
430
|
+
N as SettingGroup,
|
|
431
|
+
E as StringSetting,
|
|
432
|
+
k as iterateSettings
|
|
438
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
|
/**
|
package/package.json
CHANGED