builder-settings-types 0.0.40 → 0.0.42
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,15 +1,15 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function w(o,t){for(const e in o)if(o.hasOwnProperty(e)){const i=o[e];t(e,i)}}class
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function w(o,t){for(const e in o)if(o.hasOwnProperty(e)){const i=o[e];t(e,i)}}class N{setOnChange(t){this.onChange=t,w(this.settings,(e,i)=>{i.setOnChange(t)})}constructor(t){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 i=document.createElement("h3");i.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 n=document.createElement("div");n.className="setting-group-content";for(const a in this.settings){const h=this.settings[a].draw();n.appendChild(h)}return e.onclick=()=>{n.classList.toggle("collapsed"),s.classList.toggle("rotated")},e.appendChild(i),e.appendChild(s),t.appendChild(e),t.appendChild(n),t}}function
|
|
5
|
+
`;const n=document.createElement("div");n.className="setting-group-content";for(const a in this.settings){const h=this.settings[a].draw();n.appendChild(h)}return e.onclick=()=>{n.classList.toggle("collapsed"),s.classList.toggle("rotated")},e.appendChild(i),e.appendChild(s),t.appendChild(e),t.appendChild(n),t}}function f(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]}}class g{constructor(t={}){this.props=t,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 n=document.createElement("div");if(n.className="icon-container",t.icon){let a=this.createIcon(t.icon,t.iconClassName);n.appendChild(a)}if(t.title){const a=this.createLabel(t.title,t.labelClassName);n.appendChild(a)}e.appendChild(n)}const i=document.createElement("div");i.className=t.wrapperClassName||"";const s=document.createElement("input");return this.inputEl=s,s.value=t.value||f(t.inputType),s.type=t.inputType,s.placeholder=t.placeholder||"",s.className=t.inputClassName||"",s.oninput=n=>{const a=n.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),i.appendChild(s),e.appendChild(i),e}createLabel(t,e){const i=document.createElement("span");return i.textContent=t,i.className="input-label "+(e||""),i}createIcon(t,e){const i=document.createElement("span");return i.className="input-icon "+(e||""),i.innerHTML=t,i}}class u extends g{constructor(t={}){super(t),this.inputType="number"}draw(){const t=e=>{this.props.minValue!==void 0&&(e.min=String(this.props.minValue)),this.props.maxValue!==void 0&&(e.max=String(this.props.maxValue)),this.props.className&&e.classList.add(this.props.className),e.addEventListener("input",()=>{const i=this.props.minValue??Number.MIN_SAFE_INTEGER,s=this.props.maxValue??Number.MAX_SAFE_INTEGER;let n=Number(e.value);n<i&&(n=i),n>s&&(n=s),e.value=String(n)})};return 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})}}class x extends N{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 y extends g{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 i=this.createIcon(this.icon),s=this.createLabel("Color");e.appendChild(i),e.appendChild(s);const n=document.createElement("div");n.className="color-input-wrapper";let a,l;const h=/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/,d=p=>h.test(p.value)?(p.style.border="",!0):(p.style.border="1px solid red",!1);a=this.createInput({value:this.value,inputType:"text",inputClassName:"color-text-input",inputCustomizer:p=>{p.oninput=v=>{var m;let c=v.target.value.trim();if(!d(p))return;this.value=c,(m=this.onChange)==null||m.call(this,c);const C=document.getElementsByClassName("color-picker")[0];C.value=c,r.style.backgroundColor=c}}}),l=this.createInput({value:this.value,inputType:this.inputType,inputClassName:"color-picker",inputCustomizer:p=>{p.oninput=v=>{var m;let c=v.target.value;this.value=c,(m=this.onChange)==null||m.call(this,c);const C=document.getElementsByClassName("color-text-input")[0];C.value=c,r.style.backgroundColor=c,d(C)}}});const r=document.createElement("div");return r.className="color-preview",r.style.backgroundColor=this.value||"",n.appendChild(r),n.appendChild(l),n.appendChild(a),t.appendChild(e),t.appendChild(n),t}}class E extends g{constructor(t={}){super(t),this.inputType="text"}draw(){return this.createInput({value:this.value,inputType:this.inputType})}}class S extends u{constructor(t){super({...t,minValue:0,maxValue:100,icon:b,title:t.title||"Opacity"}),this.inputType="number"}}const b=`
|
|
10
|
+
`}}class y extends g{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 i=this.createIcon(this.icon),s=this.createLabel("Color");e.appendChild(i),e.appendChild(s);const n=document.createElement("div");n.className="color-input-wrapper";let a,l;const h=/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/,d=p=>h.test(p.value)?(p.style.border="",!0):(p.style.border="1px solid red",!1);a=this.createInput({value:this.value,inputType:"text",inputClassName:"color-text-input",inputCustomizer:p=>{p.oninput=v=>{var m;let c=v.target.value.trim();if(!d(p))return;this.value=c,(m=this.onChange)==null||m.call(this,c);const C=document.getElementsByClassName("color-picker")[0];C.value=c,r.style.backgroundColor=c}}}),l=this.createInput({value:this.value,inputType:this.inputType,inputClassName:"color-picker",inputCustomizer:p=>{p.oninput=v=>{var m;let c=v.target.value;this.value=c,(m=this.onChange)==null||m.call(this,c);const C=document.getElementsByClassName("color-text-input")[0];C.value=c,r.style.backgroundColor=c,d(C)}}});const r=document.createElement("div");return r.className="color-preview",r.style.backgroundColor=this.value||"",n.appendChild(r),n.appendChild(l),n.appendChild(a),t.appendChild(e),t.appendChild(n),t}}class E 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})}}class S extends u{constructor(t){super({...t,minValue:0,maxValue:100,icon:b,title:t.title||"Opacity"}),this.inputType="number"}}const b=`
|
|
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 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(i=>{var s;(s=this.selectNode)==null||s.appendChild(this.createOption(i))})}).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,h;const t=document.createElement("div");t.classList.add("select-container");const e=document.createElement("div");e.className="icon-container";const i=this.createIcon(this.props.icon||""),s=this.createLabel(this.props.title||""),n=document.createElement("select");return this.selectNode=n,n.classList.add("select"),n.onchange=d=>{var r;(r=this.onChange)==null||r.call(this,d.target.value)},[...this.props.options||[],...((h=(l=this.props).getOptions)==null?void 0:h.call(l))||[]].forEach(d=>{const r=this.createOption(d);n.appendChild(r)}),this.value&&(n.value=this.value),e.appendChild(i),e.appendChild(s),t.appendChild(e),t.appendChild(n),t}}exports.ColorSetting=y;exports.MarginSettingGroup=x;exports.NumberSetting=u;exports.OpacitySetting=S;exports.SelectSetting=T;exports.Setting=g;exports.SettingGroup=
|
|
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(i=>{var s;(s=this.selectNode)==null||s.appendChild(this.createOption(i))})}).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,h;const t=document.createElement("div");t.classList.add("select-container");const e=document.createElement("div");e.className="icon-container";const i=this.createIcon(this.props.icon||""),s=this.createLabel(this.props.title||""),n=document.createElement("select");return this.selectNode=n,n.classList.add("select"),n.onchange=d=>{var r;(r=this.onChange)==null||r.call(this,d.target.value)},[...this.props.options||[],...((h=(l=this.props).getOptions)==null?void 0:h.call(l))||[]].forEach(d=>{const r=this.createOption(d);n.appendChild(r)}),this.value&&(n.value=this.value),e.appendChild(i),e.appendChild(s),t.appendChild(e),t.appendChild(n),t}}exports.ColorSetting=y;exports.MarginSettingGroup=x;exports.NumberSetting=u;exports.OpacitySetting=S;exports.SelectSetting=T;exports.Setting=g;exports.SettingGroup=N;exports.StringSetting=E;exports.iterateSettings=w;
|
|
@@ -5,7 +5,7 @@ function w(o, t) {
|
|
|
5
5
|
t(e, i);
|
|
6
6
|
}
|
|
7
7
|
}
|
|
8
|
-
class
|
|
8
|
+
class N {
|
|
9
9
|
setOnChange(t) {
|
|
10
10
|
this.onChange = t, w(this.settings, (e, i) => {
|
|
11
11
|
i.setOnChange(t);
|
|
@@ -38,7 +38,7 @@ class f {
|
|
|
38
38
|
}, e.appendChild(i), e.appendChild(s), t.appendChild(e), t.appendChild(n), t;
|
|
39
39
|
}
|
|
40
40
|
}
|
|
41
|
-
function
|
|
41
|
+
function f(o) {
|
|
42
42
|
switch (o) {
|
|
43
43
|
case "number":
|
|
44
44
|
return 0;
|
|
@@ -80,7 +80,7 @@ class C {
|
|
|
80
80
|
const i = document.createElement("div");
|
|
81
81
|
i.className = t.wrapperClassName || "";
|
|
82
82
|
const s = document.createElement("input");
|
|
83
|
-
return this.inputEl = s, s.value = t.value ||
|
|
83
|
+
return this.inputEl = s, s.value = t.value || f(t.inputType), s.type = t.inputType, s.placeholder = t.placeholder || "", s.className = t.inputClassName || "", s.oninput = (n) => {
|
|
84
84
|
const a = n.target;
|
|
85
85
|
let l = a.value;
|
|
86
86
|
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);
|
|
@@ -112,13 +112,13 @@ class d extends C {
|
|
|
112
112
|
inputType: this.inputType,
|
|
113
113
|
title: this.props.title,
|
|
114
114
|
icon: this.props.icon,
|
|
115
|
-
inputClassName: "number-setting-input " + this.props.inputClassName,
|
|
116
|
-
wrapperClassName: "number-setting-wrapper " + this.props.wrapperClassName,
|
|
115
|
+
inputClassName: "number-setting-input " + (this.props.inputClassName || ""),
|
|
116
|
+
wrapperClassName: "number-setting-wrapper " + (this.props.wrapperClassName || ""),
|
|
117
117
|
inputCustomizer: t
|
|
118
118
|
});
|
|
119
119
|
}
|
|
120
120
|
}
|
|
121
|
-
class E extends
|
|
121
|
+
class E extends N {
|
|
122
122
|
constructor() {
|
|
123
123
|
super({
|
|
124
124
|
title: "Margin",
|
|
@@ -197,9 +197,18 @@ class b extends C {
|
|
|
197
197
|
super(t), this.inputType = "text";
|
|
198
198
|
}
|
|
199
199
|
draw() {
|
|
200
|
+
const t = (e) => {
|
|
201
|
+
this.props.maxLength !== void 0 && (e.maxLength = this.props.maxLength), this.props.className && e.classList.add(this.props.className);
|
|
202
|
+
};
|
|
200
203
|
return this.createInput({
|
|
201
204
|
value: this.value,
|
|
202
|
-
inputType: this.inputType
|
|
205
|
+
inputType: this.inputType,
|
|
206
|
+
title: this.props.title,
|
|
207
|
+
placeholder: this.props.placeholder,
|
|
208
|
+
icon: this.props.icon,
|
|
209
|
+
inputClassName: "string-setting-input " + (this.props.inputClassName || ""),
|
|
210
|
+
wrapperClassName: "string-setting-wrapper " + (this.props.wrapperClassName || ""),
|
|
211
|
+
inputCustomizer: t
|
|
203
212
|
});
|
|
204
213
|
}
|
|
205
214
|
}
|
|
@@ -261,7 +270,7 @@ export {
|
|
|
261
270
|
T as OpacitySetting,
|
|
262
271
|
L as SelectSetting,
|
|
263
272
|
C as Setting,
|
|
264
|
-
|
|
273
|
+
N as SettingGroup,
|
|
265
274
|
b as StringSetting,
|
|
266
275
|
w as iterateSettings
|
|
267
276
|
};
|
package/dist/index.css
ADDED
|
@@ -0,0 +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;justify-content:space-between;align-items:center}.number-setting-wrapper 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)}.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}:root{--color-border: #d0d5dd;--color-bg: #f8f8f8;--color-border-secondary: #eaecf0;--color-text: #667085;--color-title: #344054;--color-input-text: #292b2e;--color-white: #fff}*{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
|
@@ -26,6 +26,7 @@ declare type InputProps = {
|
|
|
26
26
|
inputCustomizer?: (input: HTMLInputElement) => void;
|
|
27
27
|
inputClassName?: string;
|
|
28
28
|
wrapperClassName?: string;
|
|
29
|
+
placeholder?: string;
|
|
29
30
|
};
|
|
30
31
|
|
|
31
32
|
export declare type InputTypes = 'number' | 'text' | 'select' | 'color' | 'date';
|
|
@@ -140,6 +141,9 @@ export declare class StringSetting extends Setting<string, StringSettingsProps>
|
|
|
140
141
|
export declare interface StringSettingsProps extends SettingProps<string> {
|
|
141
142
|
maxLength?: number;
|
|
142
143
|
value?: string;
|
|
144
|
+
className?: string;
|
|
145
|
+
inputClassName?: string;
|
|
146
|
+
wrapperClassName?: string;
|
|
143
147
|
}
|
|
144
148
|
|
|
145
149
|
export { }
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.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{margin-bottom:8px;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;overflow:hidden;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}.icon-container .input-icon{display:flex;align-items:center;justify-content:center;color:var(--color-text)}.icon-container .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;justify-content:space-between;align-items:center}.number-setting-wrapper 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)}.color-setting-wrapper{display:flex;align-items:center;justify-content:space-between;gap:2px}.color-setting-wrapper .color-input-wrapper{position:relative;padding:8px 8px 8px 4px;width:120px;height:33px;display:flex;align-items:center;gap:8px;border:1px solid var(--color-border);border-radius:8px;background-color:var(--color-bg)}.color-setting-wrapper .color-input-wrapper .color-text-input{border:none;outline:none;width:100%;color:var(--color-input-text);font-size:14px;text-align:center;background:transparent}.color-setting-wrapper .color-input-wrapper .color-picker{position:absolute;left:0;top:0;width:25px;height:25px;opacity:0;cursor:pointer}.color-setting-wrapper .color-input-wrapper .color-preview{width:100%;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}
|