builder-settings-types 0.0.11 → 0.0.16

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.
Files changed (19) hide show
  1. package/dist/builder-settings-types.cjs.js +2 -2
  2. package/dist/builder-settings-types.es.js +13 -36
  3. package/dist/index.d.ts +9 -47
  4. package/index.html +13 -0
  5. package/package.json +1 -4
  6. package/public/vite.svg +1 -0
  7. package/src/index.ts +5 -0
  8. package/src/main.ts +144 -0
  9. package/src/marginSettings.ts +32 -0
  10. package/src/numberSettings.ts +32 -0
  11. package/src/settings.ts +38 -0
  12. package/src/settingsGroup.ts +21 -0
  13. package/src/stringSettings.ts +17 -0
  14. package/src/style.css +96 -0
  15. package/src/test.ts +144 -0
  16. package/src/typescript.svg +1 -0
  17. package/src/vite-env.d.ts +1 -0
  18. package/tsconfig.json +17 -0
  19. package/vite.config.ts +25 -0
package/dist/builder-settings-types.cjs.js CHANGED
@@ -1,6 +1,6 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});class r{constructor(t){this.title=t.title,this.settings=t.settings,Object.assign(this,t.settings)}}const o=Object.freeze(Object.defineProperty({__proto__:null,SettingGroup:r},Symbol.toStringTag,{value:"Module"}));class l{constructor(t={}){this.props=t,this.title=t.title||"Setting",this.value=t.defaultValue}defaultDraw(){const t=document.createElement("div"),e=document.createElement("label");e.textContent=this.title??"";const s=document.createElement("input");return s.type=this.inputType,s.placeholder=this.props.placeholder||`Enter ${this.title}`,s.value=this.value!==void 0?String(this.value):"",t.appendChild(e),t.appendChild(s),t}}class i extends l{constructor(t={}){super(t),this.props=t,this.inputType="number"}draw(){const t=super.defaultDraw(),e=t.querySelector("input");return 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),t}}const a=Object.freeze(Object.defineProperty({__proto__:null,NumberSetting:i},Symbol.toStringTag,{value:"Module"}));class g extends r{constructor(){super({title:"Margin",settings:{margin:new i({title:"Margin All"}),marginTop:new i({title:"Margin Top"}),marginRight:new i({title:"Margin Right"}),marginBottom:new i({title:"Margin Bottom"}),marginLeft:new i({title:"Margin Left"})}})}getCssCode(){return`
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class r{constructor(t={}){this.props=t,this.title=t.title||"Setting",this.value=t.defaultValue}defaultDraw(){const t=document.createElement("div"),e=document.createElement("label");e.textContent=this.title??"";const s=document.createElement("input");return s.type=this.inputType,s.placeholder=this.props.placeholder||`Enter ${this.title}`,s.value=this.value!==void 0?String(this.value):"",t.appendChild(e),t.appendChild(s),t}}class a{constructor(t){this.title=t.title,this.settings=t.settings,Object.assign(this,t.settings)}}class i extends r{constructor(t={}){super(t),this.props=t,this.inputType="number"}draw(){const t=super.defaultDraw(),e=t.querySelector("input");return 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),t}}class l extends a{constructor(){super({title:"Margin",settings:{margin:new i({title:"Margin All"}),marginTop:new i({title:"Margin Top"}),marginRight:new i({title:"Margin Right"}),marginBottom:new i({title:"Margin Bottom"}),marginLeft:new i({title:"Margin Left"})}})}getCssCode(){return`
2
2
  margin-botton: ${this.settings.marginBottom.value}px;
3
3
  margin-top: ${this.settings.marginTop.value}px;
4
4
  margin-right: ${this.settings.marginRight.value}px;
5
5
  margin-left: ${this.settings.marginLeft.value}px;
6
- `}}const u=Object.freeze(Object.defineProperty({__proto__:null,MarginSetting:g},Symbol.toStringTag,{value:"Module"}));class p extends l{constructor(t={}){super(t),this.inputType="text"}draw(){return super.defaultDraw()}}const c=Object.freeze(Object.defineProperty({__proto__:null,StringSetting:p},Symbol.toStringTag,{value:"Module"}));function m(){console.log("logg yes fixed")}const d={SettingGroup:r,settingsGroup:o,marginSettings:u,numberSettings:a,stringSettings:c};exports.default=d;exports.logger=m;
6
+ `}}class g extends r{constructor(t={}){super(t),this.inputType="text"}draw(){return super.defaultDraw()}}exports.MarginSetting=l;exports.NumberSetting=i;exports.Setting=r;exports.SettingGroup=a;exports.StringSetting=g;
package/dist/builder-settings-types.es.js CHANGED
@@ -1,13 +1,4 @@
1
1
  class r {
2
- constructor(t) {
3
- this.title = t.title, this.settings = t.settings, Object.assign(this, t.settings);
4
- }
5
- }
6
- const o = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
7
- __proto__: null,
8
- SettingGroup: r
9
- }, Symbol.toStringTag, { value: "Module" }));
10
- class l {
11
2
  constructor(t = {}) {
12
3
  this.props = t, this.title = t.title || "Setting", this.value = t.defaultValue;
13
4
  }
@@ -18,7 +9,12 @@ class l {
18
9
  return s.type = this.inputType, s.placeholder = this.props.placeholder || `Enter ${this.title}`, s.value = this.value !== void 0 ? String(this.value) : "", t.appendChild(e), t.appendChild(s), t;
19
10
  }
20
11
  }
21
- class i extends l {
12
+ class a {
13
+ constructor(t) {
14
+ this.title = t.title, this.settings = t.settings, Object.assign(this, t.settings);
15
+ }
16
+ }
17
+ class i extends r {
22
18
  constructor(t = {}) {
23
19
  super(t), this.props = t, this.inputType = "number";
24
20
  }
@@ -27,11 +23,7 @@ class i extends l {
27
23
  return 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), t;
28
24
  }
29
25
  }
30
- const a = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
31
- __proto__: null,
32
- NumberSetting: i
33
- }, Symbol.toStringTag, { value: "Module" }));
34
- class g extends r {
26
+ class l extends a {
35
27
  constructor() {
36
28
  super({
37
29
  title: "Margin",
@@ -53,11 +45,7 @@ class g extends r {
53
45
  `;
54
46
  }
55
47
  }
56
- const u = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
57
- __proto__: null,
58
- MarginSetting: g
59
- }, Symbol.toStringTag, { value: "Module" }));
60
- class p extends l {
48
+ class u extends r {
61
49
  constructor(t = {}) {
62
50
  super(t), this.inputType = "text";
63
51
  }
@@ -65,21 +53,10 @@ class p extends l {
65
53
  return super.defaultDraw();
66
54
  }
67
55
  }
68
- const c = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
69
- __proto__: null,
70
- StringSetting: p
71
- }, Symbol.toStringTag, { value: "Module" }));
72
- function m() {
73
- console.log("logg yes fixed");
74
- }
75
- const d = {
76
- SettingGroup: r,
77
- settingsGroup: o,
78
- marginSettings: u,
79
- numberSettings: a,
80
- stringSettings: c
81
- };
82
56
  export {
83
- d as default,
84
- m as logger
57
+ l as MarginSetting,
58
+ i as NumberSetting,
59
+ r as Setting,
60
+ a as SettingGroup,
61
+ u as StringSetting
85
62
  };
package/dist/index.d.ts CHANGED
@@ -1,15 +1,4 @@
1
- declare const _default: {
2
- SettingGroup: typeof settingsGroup.SettingGroup;
3
- settingsGroup: typeof settingsGroup;
4
- marginSettings: typeof marginSettings;
5
- numberSettings: typeof numberSettings;
6
- stringSettings: typeof stringSettings;
7
- };
8
- export default _default;
9
-
10
- export declare function logger(): void;
11
-
12
- declare class MarginSetting extends SettingGroup<{
1
+ export declare class MarginSetting extends SettingGroup<{
13
2
  margin: NumberSetting;
14
3
  marginTop: NumberSetting;
15
4
  marginRight: NumberSetting;
@@ -20,33 +9,20 @@ declare class MarginSetting extends SettingGroup<{
20
9
  getCssCode(): string;
21
10
  }
22
11
 
23
- declare namespace marginSettings {
24
- export {
25
- MarginSetting
26
- }
27
- }
28
-
29
- declare interface NumberInputProps extends SettingProps<number> {
12
+ export declare interface NumberInputProps extends SettingProps<number> {
30
13
  minValue?: number;
31
14
  maxValue?: number;
32
15
  className?: string;
33
16
  }
34
17
 
35
- declare class NumberSetting extends Setting<number> {
18
+ export declare class NumberSetting extends Setting<number> {
36
19
  protected props: NumberInputProps;
37
20
  inputType: string;
38
21
  constructor(props?: NumberInputProps);
39
22
  draw(): HTMLElement;
40
23
  }
41
24
 
42
- declare namespace numberSettings {
43
- export {
44
- NumberInputProps,
45
- NumberSetting
46
- }
47
- }
48
-
49
- declare abstract class Setting<T> {
25
+ export declare abstract class Setting<T> {
50
26
  protected props: SettingProps<T>;
51
27
  value: T | undefined;
52
28
  title: string | undefined;
@@ -56,45 +32,31 @@ declare abstract class Setting<T> {
56
32
  defaultDraw(): HTMLElement;
57
33
  }
58
34
 
59
- declare class SettingGroup<T extends Record<string, Setting<any> | SettingGroup<any>>> {
35
+ export declare class SettingGroup<T extends Record<string, Setting<any> | SettingGroup<any>>> {
60
36
  title: string;
61
37
  settings: T;
62
38
  constructor(groupProps: SettingGroupProps<T>);
63
39
  }
64
40
 
65
- declare type SettingGroupProps<T> = {
41
+ export declare type SettingGroupProps<T> = {
66
42
  title: string;
67
43
  settings: T;
68
44
  };
69
45
 
70
- declare interface SettingProps<T> {
46
+ export declare interface SettingProps<T> {
71
47
  defaultValue?: T;
72
48
  title?: string;
73
49
  placeholder?: string;
74
50
  }
75
51
 
76
- declare namespace settingsGroup {
77
- export {
78
- SettingGroupProps,
79
- SettingGroup
80
- }
81
- }
82
-
83
- declare interface StringInputProps extends SettingProps<string> {
52
+ export declare interface StringInputProps extends SettingProps<string> {
84
53
  maxLength?: number;
85
54
  }
86
55
 
87
- declare class StringSetting extends Setting<string> {
56
+ export declare class StringSetting extends Setting<string> {
88
57
  inputType: string;
89
58
  constructor(props?: StringInputProps);
90
59
  draw(): HTMLElement;
91
60
  }
92
61
 
93
- declare namespace stringSettings {
94
- export {
95
- StringInputProps,
96
- StringSetting
97
- }
98
- }
99
-
100
62
  export { }
package/index.html ADDED
@@ -0,0 +1,13 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <link rel="icon" type="image/svg+xml" href="/vite.svg" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>Vite + TS</title>
8
+ </head>
9
+ <body>
10
+ <div id="app"></div>
11
+ <script type="module" src="/src/main.ts"></script>
12
+ </body>
13
+ </html>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "builder-settings-types",
3
3
  "description": "builder settings",
4
- "version": "0.0.11",
4
+ "version": "0.0.16",
5
5
  "type": "module",
6
6
  "main": "dist/builder-settings-types.cjs.js",
7
7
  "module": "dist/builder-settings-types.es.js",
@@ -16,9 +16,6 @@
16
16
  "typescript": "~5.6.2",
17
17
  "vite": "^6.0.1"
18
18
  },
19
- "files": [
20
- "dist"
21
- ],
22
19
  "exports": {
23
20
  ".": {
24
21
  "types": "./dist/index.d.ts",
package/public/vite.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
package/src/index.ts ADDED
@@ -0,0 +1,5 @@
1
+ export * from "./settings";
2
+ export * from "./settingsGroup";
3
+ export * from "./marginSettings";
4
+ export * from "./numberSettings";
5
+ export * from "./stringSettings";
package/src/main.ts ADDED
@@ -0,0 +1,144 @@
1
+ // import { MarginSetting, NumberSetting, SettingGroup } from './numberSettings'
2
+ // import { Setting } from './settings'
3
+ // import { StringSetting } from './stringSettings'
4
+
5
+ import { NumberSetting } from "./numberSettings";
6
+ import { SettingGroup } from "./settingsGroup";
7
+ import { StringSetting } from "./stringSettings";
8
+
9
+ // let a: NumberSetting = new NumberSetting({ minValue: 1 })
10
+
11
+ // let settings = {
12
+ // number1: new NumberSetting({ minValue: 1 }),
13
+ // number2: new NumberSetting({
14
+ // title: 'secondNumber',
15
+ // maxValue: 100,
16
+ // defaultValue: 5,
17
+ // }),
18
+ // }
19
+ // let m = new MarginSetting()
20
+
21
+ // Object.keys(settings).forEach(key => {
22
+ // let setting = settings[key as keyof typeof settings] as Setting<any>
23
+ // console.log(setting.value)
24
+ // })
25
+
26
+ // // class MarginSetting extends SettingType {
27
+ // // type = "Margin"
28
+ // // }
29
+
30
+ // // const settings1 = {
31
+ // // individualSettings: {
32
+ // // numberSetting1: new NumberSetting({
33
+ // // minValue: 1,
34
+ // // maxValue: 10,
35
+ // // defaultValue: 5,
36
+ // // }),
37
+ // // numberSetting2: new NumberSetting({
38
+ // // title: 'Age',
39
+ // // minValue: 18,
40
+ // // maxValue: 100,
41
+ // // defaultValue: 25,
42
+ // // }),
43
+ // // stringSetting1: new StringSetting({
44
+ // // title: 'Username',
45
+ // // maxLength: 20,
46
+ // // defaultValue: 'Guest',
47
+ // // }),
48
+ // // stringSetting2: new StringSetting({
49
+ // // title: 'Email',
50
+ // // maxLength: 50,
51
+ // // defaultValue: 'user@example.com',
52
+ // // }),
53
+ // // },
54
+ // // groups: {
55
+ // // userSettingsGroup: new SettingGroup('User Settings', {
56
+ // // username: new StringSetting({
57
+ // // title: 'Username',
58
+ // // maxLength: 20,
59
+ // // defaultValue: 'Guest',
60
+ // // }),
61
+ // // email: new StringSetting({
62
+ // // title: 'Email',
63
+ // // maxLength: 50,
64
+ // // defaultValue: 'user@example.com',
65
+ // // }),
66
+ // // age: new NumberSetting({
67
+ // // title: 'Age',
68
+ // // minValue: 18,
69
+ // // maxValue: 100,
70
+ // // defaultValue: 25,
71
+ // // }),
72
+ // // }),
73
+ // // preferencesGroup: new SettingGroup('Preferences', {
74
+ // // volume: new NumberSetting({
75
+ // // title: 'Volume',
76
+ // // minValue: 0,
77
+ // // maxValue: 100,
78
+ // // defaultValue: 50,
79
+ // // }),
80
+ // // brightness: new NumberSetting({
81
+ // // title: 'Brightness',
82
+ // // minValue: 0,
83
+ // // maxValue: 100,
84
+ // // defaultValue: 75,
85
+ // // }),
86
+ // // }),
87
+ // // },
88
+ // // }
89
+
90
+ // // const settings11 = {
91
+ // // individualSettings: {
92
+ // // numberSetting1: new NumberSetting({}),
93
+ // // numberSetting2: new NumberSetting({}),
94
+ // // stringSetting1: new StringSetting({}),
95
+ // // stringSetting2: new StringSetting({}),
96
+ // // },
97
+ // // groups: {
98
+ // // userSettingsGroup: new SettingGroup('User Settings', {
99
+ // // username: new StringSetting({}),
100
+ // // email: new StringSetting({}),
101
+ // // age: new NumberSetting({}),
102
+ // // }),
103
+ // // preferencesGroup: new SettingGroup('Preferences', {
104
+ // // volume: new NumberSetting({}),
105
+ // // brightness: new NumberSetting({}),
106
+ // // }),
107
+ // // },
108
+ // // }
109
+
110
+ const mygroup = new SettingGroup({
111
+ title: 'group',
112
+ settings: {
113
+ age: new NumberSetting({}),
114
+ name: new StringSetting({}),
115
+ sg: new SettingGroup({
116
+ title: '123',
117
+ settings: {
118
+ name1: new StringSetting({}),
119
+ },
120
+ }),
121
+ },
122
+ })
123
+
124
+ // mygroup.settings.age.value
125
+
126
+ const settingsContainer = document.createElement("div");
127
+ document.body.appendChild(settingsContainer);
128
+
129
+ const leaderboardSettings = {
130
+ age: new NumberSetting({
131
+ title: "Age",
132
+ placeholder: "Enter your age",
133
+ minValue: 0,
134
+ maxValue: 100,
135
+ }),
136
+ name: new StringSetting({ title: "Name", placeholder: "Enter your name" }),
137
+ };
138
+
139
+ // Loop through settings and render them
140
+ Object.keys(leaderboardSettings).forEach((key) => {
141
+ const setting = leaderboardSettings[key as keyof typeof leaderboardSettings];
142
+ const htmlElement = setting.draw();
143
+ settingsContainer.appendChild(htmlElement);
144
+ });
package/src/marginSettings.ts ADDED
@@ -0,0 +1,32 @@
1
+ import { NumberSetting } from './numberSettings'
2
+ import { SettingGroup } from './settingsGroup'
3
+
4
+ export class MarginSetting extends SettingGroup<{
5
+ margin: NumberSetting
6
+ marginTop: NumberSetting
7
+ marginRight: NumberSetting
8
+ marginBottom: NumberSetting
9
+ marginLeft: NumberSetting
10
+ }> {
11
+ constructor() {
12
+ super({
13
+ title: 'Margin',
14
+ settings: {
15
+ margin: new NumberSetting({ title: 'Margin All' }),
16
+ marginTop: new NumberSetting({ title: 'Margin Top' }),
17
+ marginRight: new NumberSetting({ title: 'Margin Right' }),
18
+ marginBottom: new NumberSetting({ title: 'Margin Bottom' }),
19
+ marginLeft: new NumberSetting({ title: 'Margin Left' }),
20
+ },
21
+ })
22
+ }
23
+
24
+ getCssCode(){
25
+ return `
26
+ margin-botton: ${this.settings.marginBottom.value}px;
27
+ margin-top: ${this.settings.marginTop.value}px;
28
+ margin-right: ${this.settings.marginRight.value}px;
29
+ margin-left: ${this.settings.marginLeft.value}px;
30
+ `
31
+ }
32
+ }
package/src/numberSettings.ts ADDED
@@ -0,0 +1,32 @@
1
+ import { Setting, SettingProps } from './settings'
2
+
3
+ export interface NumberInputProps extends SettingProps<number> {
4
+ minValue?: number
5
+ maxValue?: number
6
+ className?: string
7
+ }
8
+
9
+ export class NumberSetting extends Setting<number> {
10
+ inputType: string = 'number'
11
+ constructor(protected props: NumberInputProps = {}) {
12
+ super(props)
13
+ }
14
+
15
+ draw(): HTMLElement {
16
+ const element = super.defaultDraw()
17
+
18
+ const input = element.querySelector('input') as HTMLInputElement
19
+
20
+ if (this.props.minValue !== undefined) {
21
+ input.min = String(this.props.minValue)
22
+ }
23
+ if (this.props.maxValue !== undefined) {
24
+ input.max = String(this.props.maxValue)
25
+ }
26
+ if (this.props.className) {
27
+ input.classList.add(this.props.className)
28
+ }
29
+
30
+ return element
31
+ }
32
+ }
package/src/settings.ts ADDED
@@ -0,0 +1,38 @@
1
+ import { NumberSetting } from "./numberSettings"
2
+
3
+ export interface SettingProps<T> {
4
+ defaultValue?: T
5
+ title?: string
6
+ placeholder?: string
7
+ }
8
+
9
+ export abstract class Setting<T> {
10
+ value: T | undefined
11
+ title: string | undefined
12
+ abstract inputType: string
13
+
14
+ constructor(protected props: SettingProps<T> = {}) {
15
+ this.title = props.title || 'Setting'
16
+ this.value = props.defaultValue
17
+ }
18
+
19
+ abstract draw(): HTMLElement
20
+
21
+ defaultDraw(): HTMLElement {
22
+ const wrapper = document.createElement('div')
23
+
24
+ const label = document.createElement('label')
25
+ label.textContent = this.title ?? ''
26
+
27
+ const input = document.createElement('input')
28
+ input.type = this.inputType
29
+ input.placeholder = this.props.placeholder || `Enter ${this.title}`
30
+ input.value = this.value !== undefined ? String(this.value) : ''
31
+
32
+ wrapper.appendChild(label)
33
+ wrapper.appendChild(input)
34
+
35
+ return wrapper
36
+ }
37
+ }
38
+
package/src/settingsGroup.ts ADDED
@@ -0,0 +1,21 @@
1
+ import { Setting } from "./settings";
2
+
3
+ export type SettingGroupProps<T> = {
4
+ title: string;
5
+ settings: T;
6
+ };
7
+
8
+ export class SettingGroup<T extends Record<string, Setting<any> | SettingGroup<any>>> {
9
+ title: string;
10
+ settings: T;
11
+
12
+ constructor(groupProps: SettingGroupProps<T>) {
13
+ this.title = groupProps.title;
14
+ this.settings = groupProps.settings;
15
+
16
+ // Assign settings properties directly to the instance
17
+ Object.assign(this, groupProps.settings);
18
+ }
19
+ }
20
+
21
+ //{{settings.balance.settings.Color.value}}
package/src/stringSettings.ts ADDED
@@ -0,0 +1,17 @@
1
+ import { Setting, SettingProps } from './settings'
2
+
3
+ export interface StringInputProps extends SettingProps<string> {
4
+ maxLength?: number
5
+ }
6
+
7
+ export class StringSetting extends Setting<string> {
8
+ inputType = 'text'
9
+
10
+ constructor(props: StringInputProps = {}) {
11
+ super(props)
12
+ }
13
+
14
+ draw(): HTMLElement {
15
+ return super.defaultDraw()
16
+ }
17
+ }
package/src/style.css ADDED
@@ -0,0 +1,96 @@
1
+ :root {
2
+ font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3
+ line-height: 1.5;
4
+ font-weight: 400;
5
+
6
+ color-scheme: light dark;
7
+ color: rgba(255, 255, 255, 0.87);
8
+ background-color: #242424;
9
+
10
+ font-synthesis: none;
11
+ text-rendering: optimizeLegibility;
12
+ -webkit-font-smoothing: antialiased;
13
+ -moz-osx-font-smoothing: grayscale;
14
+ }
15
+
16
+ a {
17
+ font-weight: 500;
18
+ color: #646cff;
19
+ text-decoration: inherit;
20
+ }
21
+ a:hover {
22
+ color: #535bf2;
23
+ }
24
+
25
+ body {
26
+ margin: 0;
27
+ display: flex;
28
+ place-items: center;
29
+ min-width: 320px;
30
+ min-height: 100vh;
31
+ }
32
+
33
+ h1 {
34
+ font-size: 3.2em;
35
+ line-height: 1.1;
36
+ }
37
+
38
+ #app {
39
+ max-width: 1280px;
40
+ margin: 0 auto;
41
+ padding: 2rem;
42
+ text-align: center;
43
+ }
44
+
45
+ .logo {
46
+ height: 6em;
47
+ padding: 1.5em;
48
+ will-change: filter;
49
+ transition: filter 300ms;
50
+ }
51
+ .logo:hover {
52
+ filter: drop-shadow(0 0 2em #646cffaa);
53
+ }
54
+ .logo.vanilla:hover {
55
+ filter: drop-shadow(0 0 2em #3178c6aa);
56
+ }
57
+
58
+ .card {
59
+ padding: 2em;
60
+ }
61
+
62
+ .read-the-docs {
63
+ color: #888;
64
+ }
65
+
66
+ button {
67
+ border-radius: 8px;
68
+ border: 1px solid transparent;
69
+ padding: 0.6em 1.2em;
70
+ font-size: 1em;
71
+ font-weight: 500;
72
+ font-family: inherit;
73
+ background-color: #1a1a1a;
74
+ cursor: pointer;
75
+ transition: border-color 0.25s;
76
+ }
77
+ button:hover {
78
+ border-color: #646cff;
79
+ }
80
+ button:focus,
81
+ button:focus-visible {
82
+ outline: 4px auto -webkit-focus-ring-color;
83
+ }
84
+
85
+ @media (prefers-color-scheme: light) {
86
+ :root {
87
+ color: #213547;
88
+ background-color: #ffffff;
89
+ }
90
+ a:hover {
91
+ color: #747bff;
92
+ }
93
+ button {
94
+ background-color: #f9f9f9;
95
+ }
96
+ }
package/src/test.ts ADDED
@@ -0,0 +1,144 @@
1
+ // import { MarginSetting, NumberSetting, SettingGroup } from './numberSettings'
2
+ // import { Setting } from './settings'
3
+ // import { StringSetting } from './stringSettings'
4
+
5
+ import { NumberSetting } from "./numberSettings";
6
+ import { SettingGroup } from "./settingsGroup";
7
+ import { StringSetting } from "./stringSettings";
8
+
9
+ // let a: NumberSetting = new NumberSetting({ minValue: 1 })
10
+
11
+ // let settings = {
12
+ // number1: new NumberSetting({ minValue: 1 }),
13
+ // number2: new NumberSetting({
14
+ // title: 'secondNumber',
15
+ // maxValue: 100,
16
+ // defaultValue: 5,
17
+ // }),
18
+ // }
19
+ // let m = new MarginSetting()
20
+
21
+ // Object.keys(settings).forEach(key => {
22
+ // let setting = settings[key as keyof typeof settings] as Setting<any>
23
+ // console.log(setting.value)
24
+ // })
25
+
26
+ // // class MarginSetting extends SettingType {
27
+ // // type = "Margin"
28
+ // // }
29
+
30
+ // // const settings1 = {
31
+ // // individualSettings: {
32
+ // // numberSetting1: new NumberSetting({
33
+ // // minValue: 1,
34
+ // // maxValue: 10,
35
+ // // defaultValue: 5,
36
+ // // }),
37
+ // // numberSetting2: new NumberSetting({
38
+ // // title: 'Age',
39
+ // // minValue: 18,
40
+ // // maxValue: 100,
41
+ // // defaultValue: 25,
42
+ // // }),
43
+ // // stringSetting1: new StringSetting({
44
+ // // title: 'Username',
45
+ // // maxLength: 20,
46
+ // // defaultValue: 'Guest',
47
+ // // }),
48
+ // // stringSetting2: new StringSetting({
49
+ // // title: 'Email',
50
+ // // maxLength: 50,
51
+ // // defaultValue: 'user@example.com',
52
+ // // }),
53
+ // // },
54
+ // // groups: {
55
+ // // userSettingsGroup: new SettingGroup('User Settings', {
56
+ // // username: new StringSetting({
57
+ // // title: 'Username',
58
+ // // maxLength: 20,
59
+ // // defaultValue: 'Guest',
60
+ // // }),
61
+ // // email: new StringSetting({
62
+ // // title: 'Email',
63
+ // // maxLength: 50,
64
+ // // defaultValue: 'user@example.com',
65
+ // // }),
66
+ // // age: new NumberSetting({
67
+ // // title: 'Age',
68
+ // // minValue: 18,
69
+ // // maxValue: 100,
70
+ // // defaultValue: 25,
71
+ // // }),
72
+ // // }),
73
+ // // preferencesGroup: new SettingGroup('Preferences', {
74
+ // // volume: new NumberSetting({
75
+ // // title: 'Volume',
76
+ // // minValue: 0,
77
+ // // maxValue: 100,
78
+ // // defaultValue: 50,
79
+ // // }),
80
+ // // brightness: new NumberSetting({
81
+ // // title: 'Brightness',
82
+ // // minValue: 0,
83
+ // // maxValue: 100,
84
+ // // defaultValue: 75,
85
+ // // }),
86
+ // // }),
87
+ // // },
88
+ // // }
89
+
90
+ // // const settings11 = {
91
+ // // individualSettings: {
92
+ // // numberSetting1: new NumberSetting({}),
93
+ // // numberSetting2: new NumberSetting({}),
94
+ // // stringSetting1: new StringSetting({}),
95
+ // // stringSetting2: new StringSetting({}),
96
+ // // },
97
+ // // groups: {
98
+ // // userSettingsGroup: new SettingGroup('User Settings', {
99
+ // // username: new StringSetting({}),
100
+ // // email: new StringSetting({}),
101
+ // // age: new NumberSetting({}),
102
+ // // }),
103
+ // // preferencesGroup: new SettingGroup('Preferences', {
104
+ // // volume: new NumberSetting({}),
105
+ // // brightness: new NumberSetting({}),
106
+ // // }),
107
+ // // },
108
+ // // }
109
+
110
+ const mygroup = new SettingGroup({
111
+ title: 'group',
112
+ settings: {
113
+ age: new NumberSetting({}),
114
+ name: new StringSetting({}),
115
+ sg: new SettingGroup({
116
+ title: '123',
117
+ settings: {
118
+ name1: new StringSetting({}),
119
+ },
120
+ }),
121
+ },
122
+ })
123
+
124
+ // mygroup.settings.age.value
125
+
126
+ const settingsContainer = document.createElement("div");
127
+ document.body.appendChild(settingsContainer);
128
+
129
+ const leaderboardSettings = {
130
+ age: new NumberSetting({
131
+ title: "Age",
132
+ placeholder: "Enter your age",
133
+ minValue: 0,
134
+ maxValue: 100,
135
+ }),
136
+ name: new StringSetting({ title: "Name", placeholder: "Enter your name" }),
137
+ };
138
+
139
+ // Loop through settings and render them
140
+ Object.keys(leaderboardSettings).forEach((key) => {
141
+ const setting = leaderboardSettings[key as keyof typeof leaderboardSettings];
142
+ const htmlElement = setting.draw();
143
+ settingsContainer.appendChild(htmlElement);
144
+ });
package/src/typescript.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="#007ACC" d="M0 128v128h256V0H0z"></path><path fill="#FFF" d="m56.612 128.85l-.081 10.483h33.32v94.68h23.568v-94.68h33.321v-10.28c0-5.69-.122-10.444-.284-10.566c-.122-.162-20.4-.244-44.983-.203l-44.74.122l-.121 10.443Zm149.955-10.742c6.501 1.625 11.459 4.51 16.01 9.224c2.357 2.52 5.851 7.111 6.136 8.208c.08.325-11.053 7.802-17.798 11.988c-.244.162-1.22-.894-2.317-2.52c-3.291-4.795-6.745-6.867-12.028-7.233c-7.76-.528-12.759 3.535-12.718 10.321c0 1.992.284 3.17 1.097 4.795c1.707 3.536 4.876 5.649 14.832 9.956c18.326 7.883 26.168 13.084 31.045 20.48c5.445 8.249 6.664 21.415 2.966 31.208c-4.063 10.646-14.14 17.879-28.323 20.276c-4.388.772-14.79.65-19.504-.203c-10.28-1.828-20.033-6.908-26.047-13.572c-2.357-2.6-6.949-9.387-6.664-9.874c.122-.163 1.178-.813 2.356-1.504c1.138-.65 5.446-3.129 9.509-5.485l7.355-4.267l1.544 2.276c2.154 3.29 6.867 7.801 9.712 9.305c8.167 4.307 19.383 3.698 24.909-1.26c2.357-2.153 3.332-4.388 3.332-7.68c0-2.966-.366-4.266-1.91-6.501c-1.99-2.845-6.054-5.242-17.595-10.24c-13.206-5.69-18.895-9.224-24.096-14.832c-3.007-3.25-5.852-8.452-7.03-12.8c-.975-3.617-1.22-12.678-.447-16.335c2.723-12.76 12.353-21.659 26.25-24.3c4.51-.853 14.994-.528 19.424.569Z"></path></svg>
package/src/vite-env.d.ts ADDED
@@ -0,0 +1 @@
1
+ /// <reference types="vite/client" />
package/tsconfig.json ADDED
@@ -0,0 +1,17 @@
1
+ {
2
+ "compilerOptions": {
3
+ "target": "ES2020",
4
+ "module": "ESNext",
5
+ "lib": ["ES2020", "DOM"],
6
+ "declaration": true,
7
+ "emitDeclarationOnly": true,
8
+ "declarationDir": "./dist",
9
+ "strict": true,
10
+ "skipLibCheck": true,
11
+ "esModuleInterop": true,
12
+ "moduleResolution": "node",
13
+ "outDir": "./dist"
14
+ },
15
+ "include": ["src/**/*"],
16
+ "exclude": ["node_modules", "dist"]
17
+ }
package/vite.config.ts ADDED
@@ -0,0 +1,25 @@
1
+ import { defineConfig } from "vite";
2
+ import dts from "vite-plugin-dts";
3
+
4
+ export default defineConfig({
5
+ plugins: [
6
+ dts({
7
+ tsconfigPath: "./tsconfig.json", // Ensure this points to your tsconfig.json
8
+ outDir: "./dist", // Output directory for declaration files
9
+ entryRoot: "./src", // Base directory for entry files
10
+ insertTypesEntry: true, // Generate types entry in package.json
11
+ rollupTypes: true, // Bundle type declarations into a single file
12
+ }),
13
+ ],
14
+ build: {
15
+ lib: {
16
+ entry: "src/index.ts",
17
+ name: "builder-settings-types",
18
+ fileName: (format) => `builder-settings-types.${format}.js`,
19
+ formats: ["es", "cjs"],
20
+ },
21
+ rollupOptions: {
22
+ external: [], // Specify external dependencies if any
23
+ },
24
+ },
25
+ });