builder-settings-types 0.0.43 → 0.0.46
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
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function f(r,t){for(const e in r)if(r.hasOwnProperty(e)){const i=r[e];t(e,i)}}class w{setOnChange(t){this.onChange=t,f(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
|
|
5
|
+
`;const n=document.createElement("div");n.className="setting-group-content";for(const a in this.settings){const l=this.settings[a].draw();n.appendChild(l)}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 N(r){switch(r){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.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){const 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=String(t.value||N(t.inputType)),s.type=t.inputType,s.placeholder=t.placeholder||"",s.className=t.inputClassName||"",s.oninput=n=>{const a=n.target;let o=a.value;t.inputType==="number"?o=Number(a.value):(t.inputType==="color"||t.inputType==="date")&&(o=a.value),this.value=o,this.onChange&&this.onChange(this.value)},t.inputCustomizer&&t.inputCustomizer(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 d extends g{constructor(t={}){super(t),this.inputType="number"}draw(){const t=n=>{this.props.minValue!==void 0&&(n.min=String(this.props.minValue)),this.props.maxValue!==void 0&&(n.max=String(this.props.maxValue)),this.props.className&&n.classList.add(this.props.className),n.addEventListener("input",()=>{const a=this.props.minValue??Number.MIN_SAFE_INTEGER,o=this.props.maxValue??Number.MAX_SAFE_INTEGER;let l=Number(n.value);l<a&&(l=a),l>o&&(l=o),n.value=String(l)})},e=this.createInput({value:this.value,inputType:this.inputType,title:this.props.title,icon:this.props.icon,inputClassName:"number-setting-input "+(this.props.inputClassName||""),wrapperClassName:"number-setting-wrapper "+(this.props.wrapperClassName||""),inputCustomizer:t});if(!this.props.suffix||this.props.suffix==="none")return e;e.classList.add("suffix-wrapper");const i=e.querySelector("input.number-setting-input");i&&(i.style.paddingRight="35px");const s=document.createElement("span");return s.className="suffix-label",s.textContent=this.props.suffix,e.appendChild(s),e}}class x extends w{constructor(){super({title:"Margin",settings:{margin:new d({title:"Margin All"}),marginTop:new d({title:"Margin Top"}),marginRight:new d({title:"Margin Right"}),marginBottom:new d({title:"Margin Bottom"}),marginLeft:new d({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,
|
|
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,o;const l=/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/,h=u=>l.test(u.value)?(u.style.border="",!0):(u.style.border="1px solid red",!1);a=this.createInput({value:this.value,inputType:"text",inputClassName:"color-text-input",inputCustomizer:u=>{u.oninput=v=>{var m;let p=v.target.value.trim();if(!h(u))return;this.value=p,(m=this.onChange)==null||m.call(this,p);const C=document.getElementsByClassName("color-picker")[0];C.value=p,c.style.backgroundColor=p}}}),o=this.createInput({value:this.value,inputType:this.inputType,inputClassName:"color-picker",inputCustomizer:u=>{u.oninput=v=>{var m;let p=v.target.value;this.value=p,(m=this.onChange)==null||m.call(this,p);const C=document.getElementsByClassName("color-text-input")[0];C.value=p,c.style.backgroundColor=p,h(C)}}});const c=document.createElement("div");return c.className="color-preview",c.style.backgroundColor=this.value||"",n.appendChild(c),n.appendChild(o),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 b extends d{constructor(t){super({...t,minValue:0,maxValue:100,icon:S,title:t.title||"Opacity"}),this.inputType="number"}}const S=`
|
|
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
|
|
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 o,l;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=h=>{var c;this.value=h.target.value,(c=this.onChange)==null||c.call(this,h.target.value)},[...this.props.options||[],...((l=(o=this.props).getOptions)==null?void 0:l.call(o))||[]].forEach(h=>{const c=this.createOption(h);n.appendChild(c)}),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=d;exports.OpacitySetting=b;exports.SelectSetting=T;exports.Setting=g;exports.SettingGroup=w;exports.StringSetting=E;exports.iterateSettings=f;
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
function
|
|
2
|
-
for (const e in
|
|
3
|
-
if (
|
|
4
|
-
const i =
|
|
1
|
+
function f(r, t) {
|
|
2
|
+
for (const e in r)
|
|
3
|
+
if (r.hasOwnProperty(e)) {
|
|
4
|
+
const i = r[e];
|
|
5
5
|
t(e, i);
|
|
6
6
|
}
|
|
7
7
|
}
|
|
8
|
-
class
|
|
8
|
+
class w {
|
|
9
9
|
setOnChange(t) {
|
|
10
|
-
this.onChange = t,
|
|
10
|
+
this.onChange = t, f(this.settings, (e, i) => {
|
|
11
11
|
i.setOnChange(t);
|
|
12
12
|
});
|
|
13
13
|
}
|
|
@@ -30,16 +30,16 @@ class N {
|
|
|
30
30
|
const n = document.createElement("div");
|
|
31
31
|
n.className = "setting-group-content";
|
|
32
32
|
for (const a in this.settings) {
|
|
33
|
-
const
|
|
34
|
-
n.appendChild(
|
|
33
|
+
const l = this.settings[a].draw();
|
|
34
|
+
n.appendChild(l);
|
|
35
35
|
}
|
|
36
36
|
return e.onclick = () => {
|
|
37
37
|
n.classList.toggle("collapsed"), s.classList.toggle("rotated");
|
|
38
38
|
}, e.appendChild(i), e.appendChild(s), t.appendChild(e), t.appendChild(n), t;
|
|
39
39
|
}
|
|
40
40
|
}
|
|
41
|
-
function
|
|
42
|
-
switch (
|
|
41
|
+
function x(r) {
|
|
42
|
+
switch (r) {
|
|
43
43
|
case "number":
|
|
44
44
|
return 0;
|
|
45
45
|
case "text":
|
|
@@ -50,6 +50,10 @@ function f(o) {
|
|
|
50
50
|
return "#000000";
|
|
51
51
|
case "date":
|
|
52
52
|
return (/* @__PURE__ */ new Date()).toISOString().split("T")[0];
|
|
53
|
+
case "button":
|
|
54
|
+
return "";
|
|
55
|
+
default:
|
|
56
|
+
return "";
|
|
53
57
|
}
|
|
54
58
|
}
|
|
55
59
|
class C {
|
|
@@ -68,7 +72,7 @@ class C {
|
|
|
68
72
|
if (e.className = t.wrapperClassName || "", t.title || t.icon) {
|
|
69
73
|
const n = document.createElement("div");
|
|
70
74
|
if (n.className = "icon-container", t.icon) {
|
|
71
|
-
|
|
75
|
+
const a = this.createIcon(t.icon, t.iconClassName);
|
|
72
76
|
n.appendChild(a);
|
|
73
77
|
}
|
|
74
78
|
if (t.title) {
|
|
@@ -80,10 +84,10 @@ class C {
|
|
|
80
84
|
const i = document.createElement("div");
|
|
81
85
|
i.className = t.wrapperClassName || "";
|
|
82
86
|
const s = document.createElement("input");
|
|
83
|
-
return this.inputEl = s, s.value = t.value ||
|
|
87
|
+
return this.inputEl = s, s.value = String(t.value || x(t.inputType)), s.type = t.inputType, s.placeholder = t.placeholder || "", s.className = t.inputClassName || "", s.oninput = (n) => {
|
|
84
88
|
const a = n.target;
|
|
85
|
-
let
|
|
86
|
-
t.inputType === "number" ?
|
|
89
|
+
let o = a.value;
|
|
90
|
+
t.inputType === "number" ? o = Number(a.value) : (t.inputType === "color" || t.inputType === "date") && (o = a.value), this.value = o, this.onChange && this.onChange(this.value);
|
|
87
91
|
}, t.inputCustomizer && t.inputCustomizer(s), i.appendChild(s), e.appendChild(i), e;
|
|
88
92
|
}
|
|
89
93
|
createLabel(t, e) {
|
|
@@ -100,14 +104,13 @@ class d extends C {
|
|
|
100
104
|
super(t), this.inputType = "number";
|
|
101
105
|
}
|
|
102
106
|
draw() {
|
|
103
|
-
const t = (
|
|
104
|
-
this.props.minValue !== void 0 && (
|
|
105
|
-
const
|
|
106
|
-
let
|
|
107
|
-
|
|
107
|
+
const t = (n) => {
|
|
108
|
+
this.props.minValue !== void 0 && (n.min = String(this.props.minValue)), this.props.maxValue !== void 0 && (n.max = String(this.props.maxValue)), this.props.className && n.classList.add(this.props.className), n.addEventListener("input", () => {
|
|
109
|
+
const a = this.props.minValue ?? Number.MIN_SAFE_INTEGER, o = this.props.maxValue ?? Number.MAX_SAFE_INTEGER;
|
|
110
|
+
let l = Number(n.value);
|
|
111
|
+
l < a && (l = a), l > o && (l = o), n.value = String(l);
|
|
108
112
|
});
|
|
109
|
-
}
|
|
110
|
-
return this.createInput({
|
|
113
|
+
}, e = this.createInput({
|
|
111
114
|
value: this.value,
|
|
112
115
|
inputType: this.inputType,
|
|
113
116
|
title: this.props.title,
|
|
@@ -116,9 +119,18 @@ class d extends C {
|
|
|
116
119
|
wrapperClassName: "number-setting-wrapper " + (this.props.wrapperClassName || ""),
|
|
117
120
|
inputCustomizer: t
|
|
118
121
|
});
|
|
122
|
+
if (!this.props.suffix || this.props.suffix === "none")
|
|
123
|
+
return e;
|
|
124
|
+
e.classList.add("suffix-wrapper");
|
|
125
|
+
const i = e.querySelector(
|
|
126
|
+
"input.number-setting-input"
|
|
127
|
+
);
|
|
128
|
+
i && (i.style.paddingRight = "35px");
|
|
129
|
+
const s = document.createElement("span");
|
|
130
|
+
return s.className = "suffix-label", s.textContent = this.props.suffix, e.appendChild(s), e;
|
|
119
131
|
}
|
|
120
132
|
}
|
|
121
|
-
class E extends
|
|
133
|
+
class E extends w {
|
|
122
134
|
constructor() {
|
|
123
135
|
super({
|
|
124
136
|
title: "Margin",
|
|
@@ -154,42 +166,42 @@ class y extends C {
|
|
|
154
166
|
e.appendChild(i), e.appendChild(s);
|
|
155
167
|
const n = document.createElement("div");
|
|
156
168
|
n.className = "color-input-wrapper";
|
|
157
|
-
let a,
|
|
158
|
-
const
|
|
169
|
+
let a, o;
|
|
170
|
+
const l = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/, h = (u) => l.test(u.value) ? (u.style.border = "", !0) : (u.style.border = "1px solid red", !1);
|
|
159
171
|
a = this.createInput({
|
|
160
172
|
value: this.value,
|
|
161
173
|
inputType: "text",
|
|
162
174
|
inputClassName: "color-text-input",
|
|
163
|
-
inputCustomizer: (
|
|
164
|
-
|
|
175
|
+
inputCustomizer: (u) => {
|
|
176
|
+
u.oninput = (v) => {
|
|
165
177
|
var m;
|
|
166
|
-
let
|
|
167
|
-
if (!u
|
|
168
|
-
this.value =
|
|
178
|
+
let p = v.target.value.trim();
|
|
179
|
+
if (!h(u)) return;
|
|
180
|
+
this.value = p, (m = this.onChange) == null || m.call(this, p);
|
|
169
181
|
const g = document.getElementsByClassName(
|
|
170
182
|
"color-picker"
|
|
171
183
|
)[0];
|
|
172
|
-
g.value =
|
|
184
|
+
g.value = p, c.style.backgroundColor = p;
|
|
173
185
|
};
|
|
174
186
|
}
|
|
175
|
-
}),
|
|
187
|
+
}), o = this.createInput({
|
|
176
188
|
value: this.value,
|
|
177
189
|
inputType: this.inputType,
|
|
178
190
|
inputClassName: "color-picker",
|
|
179
|
-
inputCustomizer: (
|
|
180
|
-
|
|
191
|
+
inputCustomizer: (u) => {
|
|
192
|
+
u.oninput = (v) => {
|
|
181
193
|
var m;
|
|
182
|
-
let
|
|
183
|
-
this.value =
|
|
194
|
+
let p = v.target.value;
|
|
195
|
+
this.value = p, (m = this.onChange) == null || m.call(this, p);
|
|
184
196
|
const g = document.getElementsByClassName(
|
|
185
197
|
"color-text-input"
|
|
186
198
|
)[0];
|
|
187
|
-
g.value =
|
|
199
|
+
g.value = p, c.style.backgroundColor = p, h(g);
|
|
188
200
|
};
|
|
189
201
|
}
|
|
190
202
|
});
|
|
191
|
-
const
|
|
192
|
-
return
|
|
203
|
+
const c = document.createElement("div");
|
|
204
|
+
return c.className = "color-preview", c.style.backgroundColor = this.value || "", n.appendChild(c), n.appendChild(o), n.appendChild(a), t.appendChild(e), t.appendChild(n), t;
|
|
193
205
|
}
|
|
194
206
|
}
|
|
195
207
|
class b extends C {
|
|
@@ -212,24 +224,24 @@ class b extends C {
|
|
|
212
224
|
});
|
|
213
225
|
}
|
|
214
226
|
}
|
|
215
|
-
class
|
|
227
|
+
class L extends d {
|
|
216
228
|
constructor(t) {
|
|
217
229
|
super({
|
|
218
230
|
...t,
|
|
219
231
|
minValue: 0,
|
|
220
232
|
maxValue: 100,
|
|
221
|
-
icon:
|
|
233
|
+
icon: N,
|
|
222
234
|
title: t.title || "Opacity"
|
|
223
235
|
}), this.inputType = "number";
|
|
224
236
|
}
|
|
225
237
|
}
|
|
226
|
-
const
|
|
238
|
+
const N = `
|
|
227
239
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
|
|
228
240
|
<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"/>
|
|
229
241
|
<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"/>
|
|
230
242
|
</svg>
|
|
231
243
|
`;
|
|
232
|
-
class
|
|
244
|
+
class T extends C {
|
|
233
245
|
constructor(t = {}) {
|
|
234
246
|
super(t), this.inputType = "select", this.props.options || (this.props.options = []), this.props.getOptionsAsync && this.props.getOptionsAsync().then((e) => {
|
|
235
247
|
this.props.options = [...this.props.options, ...e], e.forEach((i) => {
|
|
@@ -245,21 +257,21 @@ class L extends C {
|
|
|
245
257
|
return e.value = t.value, e.textContent = t.name, e;
|
|
246
258
|
}
|
|
247
259
|
draw() {
|
|
248
|
-
var
|
|
260
|
+
var o, l;
|
|
249
261
|
const t = document.createElement("div");
|
|
250
262
|
t.classList.add("select-container");
|
|
251
263
|
const e = document.createElement("div");
|
|
252
264
|
e.className = "icon-container";
|
|
253
265
|
const i = this.createIcon(this.props.icon || ""), s = this.createLabel(this.props.title || ""), n = document.createElement("select");
|
|
254
|
-
return this.selectNode = n, n.classList.add("select"), n.onchange = (
|
|
255
|
-
var
|
|
256
|
-
this.value =
|
|
266
|
+
return this.selectNode = n, n.classList.add("select"), n.onchange = (h) => {
|
|
267
|
+
var c;
|
|
268
|
+
this.value = h.target.value, (c = this.onChange) == null || c.call(this, h.target.value);
|
|
257
269
|
}, [
|
|
258
270
|
...this.props.options || [],
|
|
259
|
-
...((
|
|
260
|
-
].forEach((
|
|
261
|
-
const
|
|
262
|
-
n.appendChild(
|
|
271
|
+
...((l = (o = this.props).getOptions) == null ? void 0 : l.call(o)) || []
|
|
272
|
+
].forEach((h) => {
|
|
273
|
+
const c = this.createOption(h);
|
|
274
|
+
n.appendChild(c);
|
|
263
275
|
}), this.value && (n.value = this.value), e.appendChild(i), e.appendChild(s), t.appendChild(e), t.appendChild(n), t;
|
|
264
276
|
}
|
|
265
277
|
}
|
|
@@ -267,10 +279,10 @@ export {
|
|
|
267
279
|
y as ColorSetting,
|
|
268
280
|
E as MarginSettingGroup,
|
|
269
281
|
d as NumberSetting,
|
|
270
|
-
|
|
271
|
-
|
|
282
|
+
L as OpacitySetting,
|
|
283
|
+
T as SelectSetting,
|
|
272
284
|
C as Setting,
|
|
273
|
-
|
|
285
|
+
w as SettingGroup,
|
|
274
286
|
b as StringSetting,
|
|
275
|
-
|
|
287
|
+
f as iterateSettings
|
|
276
288
|
};
|
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;justify-content:space-between
|
|
1
|
+
@import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";.setting-group{padding:16px;display:flex;flex-direction:column;gap:8px;border-bottom:solid 1px var(--color-border);border-radius:8px;background-color:var(--color-bg)}.setting-group .setting-group{background-color:var(--color-white)!important;padding:12px;border-bottom:unset;border:1px solid var(--color-border-secondary);box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808}.setting-group-title{display:flex;align-items:center;justify-content:space-between;cursor:pointer}.setting-group-title h3{font-size:14px;font-weight:700;line-height:24px}.setting-group-arrow{display:flex;transition:transform .3s ease-in-out}.setting-group-arrow.rotated{transform:rotate(180deg)}.setting-group-content{display:flex;flex-direction:column;gap:8px;max-height:500px;opacity:1;transition:max-height .5s ease-in-out,opacity .4s ease-in-out}.setting-group-content.collapsed{max-height:0;opacity:0}.icon-container{display:flex;align-items:center;gap:4px}.input-icon{display:flex;align-items:center;justify-content:center;color:var(--color-text)}.input-label{color:var(--color-text)}.input-container{display:inline-flex;align-items:center;position:relative}.with-suffix{flex:1;padding-right:36px}.input-suffix{position:absolute;right:8px;top:50%;transform:translateY(-50%);color:#666;pointer-events:none;font-size:.9em}.number-setting-wrapper{display:flex;align-items:center;justify-content:space-between}.number-setting-input{width:120px;padding:8px;font-size:14px;border-radius:8px;color:var(--color-input-text);border:1px solid var(--color-border);background:var(--color-bg);box-sizing:border-box}.suffix-wrapper{position:relative;display:inline-flex;align-items:center}.suffix-label{position:absolute;right:8px;padding-left:8px;top:50%;transform:translateY(-50%);border-left:1px solid var(--color-divider);font-size:12px;color:var(--color-text)}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.color-setting-wrapper{display:flex;align-items:center;justify-content:space-between;gap:2px}.color-input-wrapper{position:relative;padding:8px 8px 8px 4px;width:120px;height:33px;display:flex;align-items:center;gap:4px;border:1px solid var(--color-border);border-radius:8px;background-color:var(--color-bg)}.color-text-input{border:none;outline:none;width:65px;color:var(--color-input-text);font-size:14px;text-align:center;background:transparent}.color-picker{position:absolute;left:0;top:0;width:25px;height:25px;opacity:0;cursor:pointer}.color-preview{width:25px;height:25px;border-radius:4px}.string-setting-wrapper{display:flex;justify-content:space-between;align-items:center}.string-setting-input{max-width:120px;padding:8px;font-size:14px;border-radius:8px;color:var(--color-input-text);border:1px solid var(--color-border);background:var(--color-bg)}.select-container{display:flex;align-items:center;gap:4px;justify-content:space-between}.select{width:120px;padding:8px;font-size:14px;border-radius:8px;border:1px solid var(--color-border);background:var(--color-bg);cursor:pointer}.select:focus{outline:none}: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
|
@@ -9,7 +9,7 @@ export declare interface ColorSettingProps extends SettingProps<string> {
|
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
export declare interface IChangable<T> {
|
|
12
|
-
onChange
|
|
12
|
+
setOnChange(onChange: (value: T) => void): void;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
export declare interface IDrawable {
|
|
@@ -29,7 +29,7 @@ declare type InputProps = {
|
|
|
29
29
|
placeholder?: string;
|
|
30
30
|
};
|
|
31
31
|
|
|
32
|
-
export declare type InputTypes = 'number' | 'text' | 'select' | 'color' | 'date';
|
|
32
|
+
export declare type InputTypes = 'number' | 'text' | 'select' | 'color' | 'date' | 'button';
|
|
33
33
|
|
|
34
34
|
export declare function iterateSettings<T extends Record<string, Setting<any, any> | SettingGroup<any>>>(settings: T, callback: (key: string, setting: Setting<any, any> | SettingGroup<any>) => void): void;
|
|
35
35
|
|
|
@@ -56,8 +56,11 @@ export declare interface NumberSettingsProps extends SettingProps<number> {
|
|
|
56
56
|
className?: string;
|
|
57
57
|
inputClassName?: string;
|
|
58
58
|
wrapperClassName?: string;
|
|
59
|
+
suffix?: NumberSuffix;
|
|
59
60
|
}
|
|
60
61
|
|
|
62
|
+
export declare type NumberSuffix = 'px' | 'em' | 'rem' | '%' | 'vh' | 'vw' | 'pt' | 'none';
|
|
63
|
+
|
|
61
64
|
export declare class OpacitySetting extends NumberSetting {
|
|
62
65
|
inputType: InputTypes;
|
|
63
66
|
constructor(props: OpacitySettingProps);
|
package/package.json
CHANGED