builder-settings-types 0.0.52 → 0.0.54
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.
- package/dist/builder-settings-types.cjs.js +87 -18
- package/dist/builder-settings-types.es.js +520 -186
- package/dist/index.css +1 -1
- package/dist/index.d.ts +91 -6
- package/package.json +1 -1
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{
|
|
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{flex-direction:column;gap:8px;max-height:fit-content;display:flex;transition:max-height .3s ease-in-out,display .2s ease-in-out}.setting-group-content.collapsed{max-height:0;display:none}.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}.string-setting-wrapper{display:flex;justify-content:space-between;align-items:center}.string-setting-input{max-width:120px;padding:8px;font-size:14px;border-radius:8px;color:var(--color-input-text);border:1px solid var(--color-border);background:var(--color-bg)}.color-setting-wrapper{display:flex;align-items:center;justify-content:space-between;gap:2px}.color-input-wrapper{position:relative;padding:8px 8px 8px 4px;width:120px;height:33px;display:flex;align-items:center;gap:4px;border:1px solid var(--color-border);border-radius:8px;background-color:var(--color-bg)}.color-text-input{border:none;outline:none;width:65px;color:var(--color-input-text);font-size:14px;text-align:center;background:transparent}.color-picker{position:absolute;left:0;top:0;width:25px;height:25px;opacity:0;cursor:pointer}.color-preview{width:25px;height:25px;border-radius:4px}.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}.select-container{display:flex;align-items:center;gap:4px;justify-content:space-between}.select{width:120px;padding:8px;font-size:14px;border-radius:8px;border:1px solid var(--color-border);background:var(--color-bg);cursor:pointer}.select:focus{outline:none}.align-setting-wrapper{display:flex;align-items:center;justify-content:space-between}.align-setting-label{font-size:12px;color:var(--color-text)}.align-options-container{width:120px;color:#0006;background-color:#f5f6f7;border-radius:9999px;padding:4px 13px;display:flex;gap:8px}.align-option-button{display:flex;align-items:center;justify-content:center;width:26px;height:26px;background:transparent;border:none;cursor:pointer;border-radius:50%;transition:background-color .2s,color .2s}.align-option-button:hover{background-color:#fff}.align-option-button.selected{background-color:var(--color-white);color:var(--color-black)}.button-setting-wrapper{display:flex;justify-content:center}.button-setting{padding:8px 16px;background-color:var(--button-bg, #007bff);color:var(--button-color, #fff);border:none;border-radius:4px;cursor:pointer;font-size:14px}.button-setting:hover{background-color:var(--button-bg-hover, #0056b3)}.dimension-setting-container{display:flex;flex-direction:column;gap:8px;position:relative}.dimension-bracket{width:18px;height:42px;position:absolute;top:16px;right:122px;display:flex;align-items:center;justify-content:center}.dimension-bracket:before{content:"";position:absolute;width:13px;height:14px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15' fill='none'><path d='M14 1H5C2.79086 1 1 2.79086 1 5V15' stroke='%23667085'/></svg>") no-repeat center center;background-size:contain;top:0;right:1px}.dimension-bracket:after{content:"";position:absolute;width:13px;height:14px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15' fill='none'><path d='M14 14H5C2.79086 14 1 12.2091 1 10V4.76837e-07' stroke='%23667085'/></svg>") no-repeat center center;background-size:contain;bottom:0;right:1px}.dimension-lock-icon{width:24px;height:24px;background:none;cursor:pointer;display:inline-flex;align-items:center;color:#667085;z-index:1}.dimension-lock-icon:hover{color:#000}.upload-setting-wrapper{display:flex;align-items:center;justify-content:space-between}.upload-preview{width:91px;height:71px;object-fit:cover;border-radius:4px}.upload-button{display:inline-flex;align-items:center;gap:4px;padding:5px 4px;background-color:var(--color-white);border:1px solid var(--color-border-secondary);border-radius:8px;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}.upload-icon{padding:7px 8px 8px 7px;display:flex;align-items:center;justify-content:center;background-color:var(--color-bg-icon);border-radius:28px}.upload-label{display:inline-block;font-size:12px;font-weight:600;color:var(--color-btn-text);transition:transform .15s ease}.upload-button:hover{transform:scale(1.02);box-shadow:0 2px 6px #0000001a}.tab-delete-button{background:transparent;border:none;cursor:pointer;padding:2px 4px}.tab-delete-button svg{width:16px;height:16px}.tabs-add-btn-container{display:flex;justify-content:flex-end}.tabs-add-button{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:14px;color:#667085;transition:transform .15s ease,box-shadow .3s ease}.tabs-add-button:hover{transform:scale(1);box-shadow:0 2px 6px #0000001a}.add-icon{display:flex;align-items:center;width:18px}.add-label{display:inline-block}: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;--color-btn-text: #4b4b4b;--color-bg-icon: #f2f4f7}*{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
|
@@ -10,6 +10,26 @@ export declare interface AlignSettingProps extends SettingProps<AlignValue> {
|
|
|
10
10
|
|
|
11
11
|
export declare type AlignValue = 'left' | 'center' | 'right';
|
|
12
12
|
|
|
13
|
+
/**
|
|
14
|
+
* A SettingGroup for configuring "Border" settings:
|
|
15
|
+
* - Color: a ColorSetting with a color picker and hex text.
|
|
16
|
+
* - Opacity: a NumberSetting (0-100?).
|
|
17
|
+
* - Radius: a NumberSetting with a "px" suffix.
|
|
18
|
+
* - Size: a NumberSetting with a "px" suffix (e.g., border width).
|
|
19
|
+
*/
|
|
20
|
+
export declare class BorderSettingSet extends SettingGroup<{
|
|
21
|
+
color: ColorSetting;
|
|
22
|
+
opacity: NumberSetting;
|
|
23
|
+
radius: NumberSetting;
|
|
24
|
+
size: NumberSetting;
|
|
25
|
+
}> {
|
|
26
|
+
constructor();
|
|
27
|
+
/**
|
|
28
|
+
* Optional helper to generate CSS from the current settings.
|
|
29
|
+
*/
|
|
30
|
+
getCssCode(): string;
|
|
31
|
+
}
|
|
32
|
+
|
|
13
33
|
export declare class ButtonSetting extends Setting<void, ButtonSettingProps> {
|
|
14
34
|
inputType: InputTypes;
|
|
15
35
|
constructor(props: ButtonSettingProps);
|
|
@@ -90,6 +110,21 @@ export declare interface DimensionValue {
|
|
|
90
110
|
height: number;
|
|
91
111
|
}
|
|
92
112
|
|
|
113
|
+
export declare class HeaderTypographySettingSet extends SettingGroup<{
|
|
114
|
+
color: ColorSetting;
|
|
115
|
+
opacity: NumberSetting;
|
|
116
|
+
fontFamily: SelectSetting;
|
|
117
|
+
fontWeight: SelectSetting;
|
|
118
|
+
fontSize: NumberSetting;
|
|
119
|
+
align: AlignSetting_2;
|
|
120
|
+
}> {
|
|
121
|
+
constructor();
|
|
122
|
+
/**
|
|
123
|
+
* Optional helper: generate CSS from these settings, for instance.
|
|
124
|
+
*/
|
|
125
|
+
getCssCode(): string;
|
|
126
|
+
}
|
|
127
|
+
|
|
93
128
|
export declare interface IChangable<T> {
|
|
94
129
|
setOnChange(onChange: (value: T) => void): void;
|
|
95
130
|
}
|
|
@@ -115,12 +150,27 @@ export declare type InputTypes = 'number' | 'text' | 'select' | 'color' | 'date'
|
|
|
115
150
|
|
|
116
151
|
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;
|
|
117
152
|
|
|
153
|
+
declare class MarginNumberSetting extends Setting<number | 'auto' | undefined, MarginNumberSettingsProps> {
|
|
154
|
+
inputType: InputTypes;
|
|
155
|
+
constructor(props: MarginNumberSettingsProps);
|
|
156
|
+
draw(): HTMLElement;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
declare interface MarginNumberSettingsProps extends SettingProps<number | 'auto'> {
|
|
160
|
+
minValue?: number;
|
|
161
|
+
maxValue?: number;
|
|
162
|
+
className?: string;
|
|
163
|
+
inputClassName?: string;
|
|
164
|
+
wrapperClassName?: string;
|
|
165
|
+
suffix?: NumberSuffix;
|
|
166
|
+
default: number | 'auto';
|
|
167
|
+
}
|
|
168
|
+
|
|
118
169
|
export declare class MarginSettingGroup extends SettingGroup<{
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
marginLeft: NumberSetting;
|
|
170
|
+
marginTop: MarginNumberSetting;
|
|
171
|
+
marginRight: MarginNumberSetting;
|
|
172
|
+
marginBottom: MarginNumberSetting;
|
|
173
|
+
marginLeft: MarginNumberSetting;
|
|
124
174
|
}> {
|
|
125
175
|
constructor();
|
|
126
176
|
getCssCode(): string;
|
|
@@ -201,8 +251,13 @@ export declare class SettingGroup<T extends Record<string, Setting<any, any> | S
|
|
|
201
251
|
settings: T;
|
|
202
252
|
id: string;
|
|
203
253
|
onChange?: ((value: T) => void) | undefined;
|
|
204
|
-
setOnChange(onChange: (value: T) => void): SettingGroup<T>;
|
|
205
254
|
constructor(groupProps: SettingGroupProps<T>);
|
|
255
|
+
setOnChange(onChange: (value: T) => void): SettingGroup<T>;
|
|
256
|
+
/**
|
|
257
|
+
* Returns all values if called with no arguments,
|
|
258
|
+
* or returns only the values for a single child if a key is provided.
|
|
259
|
+
*/
|
|
260
|
+
getValues<K extends keyof T>(childKey?: K): any;
|
|
206
261
|
draw(): HTMLElement;
|
|
207
262
|
}
|
|
208
263
|
|
|
@@ -235,6 +290,36 @@ export declare interface StringSettingsProps extends SettingProps<string> {
|
|
|
235
290
|
wrapperClassName?: string;
|
|
236
291
|
}
|
|
237
292
|
|
|
293
|
+
export declare class TabsContainerGroup extends SettingGroup<Record<string, TabSettingGroup>> {
|
|
294
|
+
private tabs;
|
|
295
|
+
private _el;
|
|
296
|
+
constructor();
|
|
297
|
+
/** Adds a new tab. */
|
|
298
|
+
addTab(): void;
|
|
299
|
+
/** Removes a specific tab. */
|
|
300
|
+
removeTab(tab: TabSettingGroup): void;
|
|
301
|
+
/** Relabels tabs sequentially after removal. */
|
|
302
|
+
private relabelTabs;
|
|
303
|
+
/**
|
|
304
|
+
* Override draw() so we can store the created DOM element
|
|
305
|
+
* and add the "Add Tab" button in a container positioned at the bottom-right.
|
|
306
|
+
*/
|
|
307
|
+
draw(): HTMLElement;
|
|
308
|
+
/**
|
|
309
|
+
* Re-renders the inner settings content based on the current tabs.
|
|
310
|
+
*/
|
|
311
|
+
rerender(): void;
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
declare class TabSettingGroup extends SettingGroup<{
|
|
315
|
+
name: StringSetting;
|
|
316
|
+
content: StringSetting;
|
|
317
|
+
}> {
|
|
318
|
+
private onDeleteCallback?;
|
|
319
|
+
constructor(index: number, onDelete: () => void);
|
|
320
|
+
draw(): HTMLElement;
|
|
321
|
+
}
|
|
322
|
+
|
|
238
323
|
/**
|
|
239
324
|
* A Setting subclass that displays an image preview (if any)
|
|
240
325
|
* and an "Upload" button with an icon. The user can select a file,
|
package/package.json
CHANGED