builder-settings-types 0.0.32 → 0.0.34
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,10 +1,10 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function d(o,t){for(const e in o)if(o.hasOwnProperty(e)){const n=o[e];t(e,n)}}class m{setOnChange(t){this.onChange=t,d(this.settings,(e,n)=>{n.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 n=document.createElement("h3");n.textContent=this.title;const a=document.createElement("span");a.className="setting-group-arrow",a.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 s in this.settings){const
|
|
5
|
+
`;const i=document.createElement("div");i.className="setting-group-content";for(const s in this.settings){const c=this.settings[s].draw();i.appendChild(c)}return e.onclick=()=>{i.classList.toggle("collapsed"),a.classList.toggle("rotated")},e.appendChild(n),e.appendChild(a),t.appendChild(e),t.appendChild(i),t}}class g{constructor(t={}){this.props=t,this.value=this.props.default,this.title=t.title||"Setting",this.value=t.default}setOnChange(t){this.onChange=t}createInput(t,e){const n=document.createElement("input");return n.value=t,n.type=e,n.oninput=a=>{const i=a.target;let s=i.value;e==="number"?s=Number(i.value):(e==="color"||e==="date")&&(s=i.value),this.value=s,this.onChange&&this.onChange(this.value)},n}}class u extends g{constructor(t={}){super(t),this.props=t,this.inputType="number"}draw(){const t=document.createElement("div"),e=document.createElement("label");e.textContent=this.title??"";const n=this.createInput(this.value,this.inputType);return t.appendChild(e),t.appendChild(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),t}}class C extends m{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 v extends g{constructor(t){super(t),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=document.createElement("span");n.innerHTML="<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>";const a=document.createElement("span");a.textContent="Color",a.className="color-text",e.appendChild(n),e.appendChild(a);const i=document.createElement("div");i.className="color-input-wrapper";let s,l;s=this.createInput(this.value,"text"),s.className="color-text-input",l=this.createInput(this.value,this.inputType),l.className="color-picker",l.id="id";const c=document.createElement("div");return c.className="color-preview",c.style.backgroundColor=this.value||"",l.oninput=h=>{var p;let r=h.target.value;this.value=r,s.value=r,(p=this.onChange)==null||p.call(this,r),c.style.backgroundColor=r},s.oninput=h=>{var p;let r=h.target.value;this.value=r,l.value=r,(p=this.onChange)==null||p.call(this,r),c.style.backgroundColor=r},i.appendChild(c),i.appendChild(s),i.appendChild(l),t.appendChild(e),t.appendChild(i),t}}class w extends g{constructor(t={}){super(t),this.inputType="text"}draw(){return this.createInput(this.value,this.inputType)}}exports.ColorSetting=v;exports.MarginSettingGroup=C;exports.NumberSetting=u;exports.Setting=g;exports.SettingGroup=m;exports.StringSetting=w;exports.iterateSettings=d;
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
function
|
|
2
|
-
for (const e in
|
|
3
|
-
if (
|
|
4
|
-
const n =
|
|
1
|
+
function d(o, t) {
|
|
2
|
+
for (const e in o)
|
|
3
|
+
if (o.hasOwnProperty(e)) {
|
|
4
|
+
const n = o[e];
|
|
5
5
|
t(e, n);
|
|
6
6
|
}
|
|
7
7
|
}
|
|
8
|
-
class
|
|
8
|
+
class m {
|
|
9
9
|
setOnChange(t) {
|
|
10
|
-
this.onChange = t,
|
|
10
|
+
this.onChange = t, d(this.settings, (e, n) => {
|
|
11
11
|
n.setOnChange(t);
|
|
12
12
|
});
|
|
13
13
|
}
|
|
@@ -30,8 +30,8 @@ class d {
|
|
|
30
30
|
const i = document.createElement("div");
|
|
31
31
|
i.className = "setting-group-content";
|
|
32
32
|
for (const s in this.settings) {
|
|
33
|
-
const
|
|
34
|
-
i.appendChild(
|
|
33
|
+
const c = this.settings[s].draw();
|
|
34
|
+
i.appendChild(c);
|
|
35
35
|
}
|
|
36
36
|
return e.onclick = () => {
|
|
37
37
|
i.classList.toggle("collapsed"), a.classList.toggle("rotated");
|
|
@@ -65,7 +65,7 @@ class u extends g {
|
|
|
65
65
|
return t.appendChild(e), t.appendChild(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), t;
|
|
66
66
|
}
|
|
67
67
|
}
|
|
68
|
-
class
|
|
68
|
+
class C extends m {
|
|
69
69
|
constructor() {
|
|
70
70
|
super({
|
|
71
71
|
title: "Margin",
|
|
@@ -87,7 +87,7 @@ class m extends d {
|
|
|
87
87
|
`;
|
|
88
88
|
}
|
|
89
89
|
}
|
|
90
|
-
class
|
|
90
|
+
class v extends g {
|
|
91
91
|
constructor(t) {
|
|
92
92
|
super(t), this.inputType = "color";
|
|
93
93
|
}
|
|
@@ -103,19 +103,21 @@ class C extends g {
|
|
|
103
103
|
a.textContent = "Color", a.className = "color-text", e.appendChild(n), e.appendChild(a);
|
|
104
104
|
const i = document.createElement("div");
|
|
105
105
|
i.className = "color-input-wrapper";
|
|
106
|
-
let s,
|
|
107
|
-
s = this.createInput(this.value, "text"), s.className = "color-text-input",
|
|
108
|
-
const
|
|
109
|
-
return
|
|
106
|
+
let s, l;
|
|
107
|
+
s = this.createInput(this.value, "text"), s.className = "color-text-input", l = this.createInput(this.value, this.inputType), l.className = "color-picker", l.id = "id";
|
|
108
|
+
const c = document.createElement("div");
|
|
109
|
+
return c.className = "color-preview", c.style.backgroundColor = this.value || "", l.oninput = (h) => {
|
|
110
110
|
var p;
|
|
111
|
-
|
|
112
|
-
|
|
111
|
+
let r = h.target.value;
|
|
112
|
+
this.value = r, s.value = r, (p = this.onChange) == null || p.call(this, r), c.style.backgroundColor = r;
|
|
113
|
+
}, s.oninput = (h) => {
|
|
113
114
|
var p;
|
|
114
|
-
|
|
115
|
-
|
|
115
|
+
let r = h.target.value;
|
|
116
|
+
this.value = r, l.value = r, (p = this.onChange) == null || p.call(this, r), c.style.backgroundColor = r;
|
|
117
|
+
}, i.appendChild(c), i.appendChild(s), i.appendChild(l), t.appendChild(e), t.appendChild(i), t;
|
|
116
118
|
}
|
|
117
119
|
}
|
|
118
|
-
class
|
|
120
|
+
class w extends g {
|
|
119
121
|
constructor(t = {}) {
|
|
120
122
|
super(t), this.inputType = "text";
|
|
121
123
|
}
|
|
@@ -124,11 +126,11 @@ class v extends g {
|
|
|
124
126
|
}
|
|
125
127
|
}
|
|
126
128
|
export {
|
|
127
|
-
|
|
128
|
-
|
|
129
|
+
v as ColorSetting,
|
|
130
|
+
C as MarginSettingGroup,
|
|
129
131
|
u as NumberSetting,
|
|
130
132
|
g as Setting,
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
133
|
+
m as SettingGroup,
|
|
134
|
+
w as StringSetting,
|
|
135
|
+
d as iterateSettings
|
|
134
136
|
};
|
package/package.json
CHANGED