@dotcms/uve 1.2.0 → 1.2.1-next.2
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/index.cjs.js +590 -1
- package/index.esm.js +593 -2
- package/package.json +5 -5
- package/public.cjs.js +7 -3
- package/public.esm.js +7 -3
- package/src/index.d.ts +2 -0
- package/src/lib/style-editor/internal.d.ts +71 -0
- package/src/lib/style-editor/public.d.ts +341 -0
- package/src/lib/style-editor/types.d.ts +661 -0
- package/index.esm.d.ts +0 -1
- package/internal.esm.d.ts +0 -1
- /package/{index.cjs.d.ts → index.d.ts} +0 -0
- /package/{internal.cjs.d.ts → internal.d.ts} +0 -0
|
@@ -0,0 +1,661 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Available field types for the style editor.
|
|
3
|
+
*
|
|
4
|
+
* Each field type represents a different input control that can be used
|
|
5
|
+
* in the style editor form. Currently supported field types:
|
|
6
|
+
* - `input`: Text or number input fields
|
|
7
|
+
* - `dropdown`: Single-value selection from a dropdown list
|
|
8
|
+
* - `radio`: Single-value selection from radio button options
|
|
9
|
+
* - `checkboxGroup`: Multiple-value selection from checkbox options
|
|
10
|
+
* - `switch`: Boolean toggle switch (reserved for future implementation)
|
|
11
|
+
*/
|
|
12
|
+
export type StyleEditorFieldType = 'input' | 'dropdown' | 'radio' | 'checkboxGroup' | 'switch';
|
|
13
|
+
/**
|
|
14
|
+
* Available input types for input fields in the style editor.
|
|
15
|
+
*
|
|
16
|
+
* Determines the type of input control and the expected value type:
|
|
17
|
+
* - `'text'`: Standard text input for string values (e.g., font names, color codes)
|
|
18
|
+
* - `'number'`: Numeric input for number values (e.g., font sizes, dimensions)
|
|
19
|
+
*
|
|
20
|
+
* The input type is used in conjunction with `StyleEditorInputField` to ensure
|
|
21
|
+
* type safety between the input type and the default value.
|
|
22
|
+
*/
|
|
23
|
+
export type StyleEditorFieldInputType = 'text' | 'number';
|
|
24
|
+
/**
|
|
25
|
+
* Helper type that maps input types to their corresponding default value types.
|
|
26
|
+
*
|
|
27
|
+
* This conditional type ensures type safety between `inputType` and `defaultValue`:
|
|
28
|
+
* - When `T` is `'number'`, the mapped type is `number`
|
|
29
|
+
* - When `T` is `'text'`, the mapped type is `string`
|
|
30
|
+
*
|
|
31
|
+
* Used by `StyleEditorInputFieldConfig` to enforce the correct default value type
|
|
32
|
+
* based on the input type.
|
|
33
|
+
*/
|
|
34
|
+
export type StyleEditorInputValueType<T extends StyleEditorFieldInputType> = T extends 'number' ? number : string;
|
|
35
|
+
/**
|
|
36
|
+
* Configuration type for creating input fields with type-safe default values.
|
|
37
|
+
*
|
|
38
|
+
* This generic type ensures that the `defaultValue` type matches the `inputType`:
|
|
39
|
+
* - When `inputType` is `'number'`, `defaultValue` must be a `number`
|
|
40
|
+
* - When `inputType` is `'text'`, `defaultValue` must be a `string`
|
|
41
|
+
*
|
|
42
|
+
* This type is used by `styleEditorField.input()` to provide compile-time
|
|
43
|
+
* type checking and prevent mismatched input types and default values.
|
|
44
|
+
*
|
|
45
|
+
* @typeParam T - The input type ('text' or 'number')
|
|
46
|
+
*
|
|
47
|
+
* @example
|
|
48
|
+
* ```typescript
|
|
49
|
+
* // Valid: number inputType with number defaultValue
|
|
50
|
+
* const config: StyleEditorInputFieldConfig<'number'> = {
|
|
51
|
+
* label: 'Font Size',
|
|
52
|
+
* inputType: 'number',
|
|
53
|
+
* defaultValue: 16 // ✓ Correct: number
|
|
54
|
+
* };
|
|
55
|
+
*
|
|
56
|
+
* // TypeScript error: string not assignable to number
|
|
57
|
+
* const invalid: StyleEditorInputFieldConfig<'number'> = {
|
|
58
|
+
* label: 'Font Size',
|
|
59
|
+
* inputType: 'number',
|
|
60
|
+
* defaultValue: '16' // ✗ Error: Type 'string' is not assignable to type 'number'
|
|
61
|
+
* };
|
|
62
|
+
* ```
|
|
63
|
+
*/
|
|
64
|
+
export interface StyleEditorInputFieldConfig<T extends StyleEditorFieldInputType> {
|
|
65
|
+
/** The label text displayed to users for this field */
|
|
66
|
+
label: string;
|
|
67
|
+
/** The input type that determines the value type ('text' for strings, 'number' for numbers) */
|
|
68
|
+
inputType: T;
|
|
69
|
+
/** Optional placeholder text shown when the input is empty */
|
|
70
|
+
placeholder?: string;
|
|
71
|
+
/** Optional default value (type is enforced based on inputType: number for 'number', string for 'text') */
|
|
72
|
+
defaultValue?: StyleEditorInputValueType<T>;
|
|
73
|
+
}
|
|
74
|
+
/**
|
|
75
|
+
* Base option object with label and value properties.
|
|
76
|
+
*
|
|
77
|
+
* Used in dropdown, radio, and checkbox group fields to define
|
|
78
|
+
* selectable options with separate display labels and values.
|
|
79
|
+
*
|
|
80
|
+
* @property label - Display label shown to users
|
|
81
|
+
* @property value - Value returned when this option is selected
|
|
82
|
+
*/
|
|
83
|
+
export interface StyleEditorOptionObject {
|
|
84
|
+
/** Display label shown to users */
|
|
85
|
+
label: string;
|
|
86
|
+
/** Value returned when this option is selected */
|
|
87
|
+
value: string;
|
|
88
|
+
}
|
|
89
|
+
/**
|
|
90
|
+
* Extended option object for radio fields with visual properties.
|
|
91
|
+
*
|
|
92
|
+
* Extends the base option with optional image properties for
|
|
93
|
+
* creating visual radio button options (e.g., layout selectors with preview images).
|
|
94
|
+
*
|
|
95
|
+
* @property label - Display label shown to users
|
|
96
|
+
* @property value - Value returned when this option is selected
|
|
97
|
+
* @property imageURL - Optional URL to an image displayed for this option
|
|
98
|
+
* @property width - Optional width of the image in pixels
|
|
99
|
+
* @property height - Optional height of the image in pixels
|
|
100
|
+
*/
|
|
101
|
+
export interface StyleEditorRadioOptionObject extends StyleEditorOptionObject {
|
|
102
|
+
/** Optional URL to an image displayed for this option */
|
|
103
|
+
imageURL?: string;
|
|
104
|
+
/** Optional width of the image in pixels */
|
|
105
|
+
width?: number;
|
|
106
|
+
/** Optional height of the image in pixels */
|
|
107
|
+
height?: number;
|
|
108
|
+
}
|
|
109
|
+
/**
|
|
110
|
+
* Option type for dropdown and checkbox group fields.
|
|
111
|
+
*
|
|
112
|
+
* Can be a simple string (used as both label and value)
|
|
113
|
+
* or an object with separate label and value properties.
|
|
114
|
+
*
|
|
115
|
+
* @example
|
|
116
|
+
* ```typescript
|
|
117
|
+
* // String option - 'Arial' is used as both label and value
|
|
118
|
+
* const stringOption: StyleEditorOption = 'Arial';
|
|
119
|
+
*
|
|
120
|
+
* // Object option - separate label and value
|
|
121
|
+
* const objectOption: StyleEditorOption = {
|
|
122
|
+
* label: 'Times New Roman',
|
|
123
|
+
* value: 'times'
|
|
124
|
+
* };
|
|
125
|
+
* ```
|
|
126
|
+
*/
|
|
127
|
+
export type StyleEditorOption = string | StyleEditorOptionObject;
|
|
128
|
+
/**
|
|
129
|
+
* Option type for radio fields with visual support.
|
|
130
|
+
*
|
|
131
|
+
* Can be a simple string (used as both label and value)
|
|
132
|
+
* or an object with label, value, and optional image properties.
|
|
133
|
+
*
|
|
134
|
+
* @example
|
|
135
|
+
* ```typescript
|
|
136
|
+
* // String option
|
|
137
|
+
* const stringOption: StyleEditorRadioOption = 'Left';
|
|
138
|
+
*
|
|
139
|
+
* // Object option with image
|
|
140
|
+
* const imageOption: StyleEditorRadioOption = {
|
|
141
|
+
* label: 'Left Layout',
|
|
142
|
+
* value: 'left',
|
|
143
|
+
* imageURL: 'https://example.com/left-layout.png',
|
|
144
|
+
* width: 80,
|
|
145
|
+
* height: 50
|
|
146
|
+
* };
|
|
147
|
+
* ```
|
|
148
|
+
*/
|
|
149
|
+
export type StyleEditorRadioOption = string | StyleEditorRadioOptionObject;
|
|
150
|
+
/**
|
|
151
|
+
* Default value type for checkbox group fields.
|
|
152
|
+
*
|
|
153
|
+
* A record mapping option values to their boolean checked state.
|
|
154
|
+
* Keys should match the option values, values indicate whether the option is checked.
|
|
155
|
+
*
|
|
156
|
+
* @example
|
|
157
|
+
* ```typescript
|
|
158
|
+
* const defaultState: StyleEditorCheckboxDefaultValue = {
|
|
159
|
+
* 'underline': true,
|
|
160
|
+
* 'overline': false,
|
|
161
|
+
* 'line-through': false
|
|
162
|
+
* };
|
|
163
|
+
* ```
|
|
164
|
+
*/
|
|
165
|
+
export type StyleEditorCheckboxDefaultValue = Record<string, boolean>;
|
|
166
|
+
/**
|
|
167
|
+
* Base field definition that all field types extend.
|
|
168
|
+
*
|
|
169
|
+
* Provides the common properties shared by all field types in the style editor.
|
|
170
|
+
* All specific field types must include these base properties. The `type` property
|
|
171
|
+
* serves as a discriminator that allows TypeScript to narrow union types based on
|
|
172
|
+
* the field type.
|
|
173
|
+
*
|
|
174
|
+
* @property type - The type of field (discriminator for union types, enables type narrowing)
|
|
175
|
+
* @property label - The human-readable label displayed for this field in the UI
|
|
176
|
+
*/
|
|
177
|
+
export interface StyleEditorBaseField {
|
|
178
|
+
/** The type of field, used to discriminate between different field types in union types */
|
|
179
|
+
type: StyleEditorFieldType;
|
|
180
|
+
/** The label text displayed to users for this field */
|
|
181
|
+
label: string;
|
|
182
|
+
}
|
|
183
|
+
/**
|
|
184
|
+
* Input field definition with type-safe defaultValue based on inputType.
|
|
185
|
+
*
|
|
186
|
+
* This is a discriminated union type that ensures type safety between
|
|
187
|
+
* the `inputType` and `defaultValue` properties. TypeScript will enforce
|
|
188
|
+
* that the `defaultValue` type matches the `inputType`:
|
|
189
|
+
* - When `inputType` is `'number'`, `defaultValue` must be a `number`
|
|
190
|
+
* - When `inputType` is `'text'`, `defaultValue` must be a `string`
|
|
191
|
+
*
|
|
192
|
+
* This type safety prevents runtime errors and ensures that numeric inputs
|
|
193
|
+
* receive numeric values and text inputs receive string values.
|
|
194
|
+
*
|
|
195
|
+
* @example
|
|
196
|
+
* ```typescript
|
|
197
|
+
* // Number input with number defaultValue
|
|
198
|
+
* const numberField: StyleEditorInputField = {
|
|
199
|
+
* type: 'input',
|
|
200
|
+
* label: 'Font Size',
|
|
201
|
+
* inputType: 'number',
|
|
202
|
+
* defaultValue: 16, // TypeScript ensures this is a number
|
|
203
|
+
* placeholder: 'Enter font size'
|
|
204
|
+
* };
|
|
205
|
+
*
|
|
206
|
+
* // Text input with string defaultValue
|
|
207
|
+
* const textField: StyleEditorInputField = {
|
|
208
|
+
* type: 'input',
|
|
209
|
+
* label: 'Font Name',
|
|
210
|
+
* inputType: 'text',
|
|
211
|
+
* defaultValue: 'Arial', // TypeScript ensures this is a string
|
|
212
|
+
* placeholder: 'Enter font name'
|
|
213
|
+
* };
|
|
214
|
+
*
|
|
215
|
+
* // TypeScript error: type mismatch
|
|
216
|
+
* // const invalid: StyleEditorInputField = {
|
|
217
|
+
* // type: 'input',
|
|
218
|
+
* // label: 'Size',
|
|
219
|
+
* // inputType: 'number',
|
|
220
|
+
* // defaultValue: '16' // Error: string not assignable to number
|
|
221
|
+
* // };
|
|
222
|
+
* ```
|
|
223
|
+
*/
|
|
224
|
+
export type StyleEditorInputField = (StyleEditorBaseField & {
|
|
225
|
+
/** Discriminator: must be 'input' */
|
|
226
|
+
type: 'input';
|
|
227
|
+
/** Input type for number values */
|
|
228
|
+
inputType: 'number';
|
|
229
|
+
/** Optional placeholder text shown when the input is empty */
|
|
230
|
+
placeholder?: string;
|
|
231
|
+
/** Optional default value (must be a number when inputType is 'number') */
|
|
232
|
+
defaultValue?: number;
|
|
233
|
+
}) | (StyleEditorBaseField & {
|
|
234
|
+
/** Discriminator: must be 'input' */
|
|
235
|
+
type: 'input';
|
|
236
|
+
/** Input type for text/string values */
|
|
237
|
+
inputType: 'text';
|
|
238
|
+
/** Optional placeholder text shown when the input is empty */
|
|
239
|
+
placeholder?: string;
|
|
240
|
+
/** Optional default value (must be a string when inputType is 'text') */
|
|
241
|
+
defaultValue?: string;
|
|
242
|
+
});
|
|
243
|
+
/**
|
|
244
|
+
* Dropdown field definition for single-value selection.
|
|
245
|
+
*
|
|
246
|
+
* Allows users to select a single option from a dropdown list.
|
|
247
|
+
* Options can be provided as simple strings or as objects with
|
|
248
|
+
* separate label and value properties for more flexibility.
|
|
249
|
+
*
|
|
250
|
+
* @property type - Must be 'dropdown'
|
|
251
|
+
* @property options - Array of selectable options. Can be strings or objects with label/value
|
|
252
|
+
* @property defaultValue - Optional default selected value (must match one of the option values)
|
|
253
|
+
* @property placeholder - Optional placeholder text shown when no value is selected
|
|
254
|
+
*
|
|
255
|
+
* @example
|
|
256
|
+
* ```typescript
|
|
257
|
+
* const dropdownField: StyleEditorDropdownField = {
|
|
258
|
+
* type: 'dropdown',
|
|
259
|
+
* label: 'Font Family',
|
|
260
|
+
* options: ['Arial', 'Helvetica', { label: 'Times New Roman', value: 'times' }],
|
|
261
|
+
* defaultValue: 'Arial',
|
|
262
|
+
* placeholder: 'Select a font'
|
|
263
|
+
* };
|
|
264
|
+
* ```
|
|
265
|
+
*/
|
|
266
|
+
export interface StyleEditorDropdownField extends StyleEditorBaseField {
|
|
267
|
+
/** Discriminator: must be 'dropdown' */
|
|
268
|
+
type: 'dropdown';
|
|
269
|
+
/** Array of selectable options. Can be strings or objects with label and value properties */
|
|
270
|
+
options: StyleEditorOption[];
|
|
271
|
+
/** Optional default selected value (must match one of the option values) */
|
|
272
|
+
defaultValue?: string;
|
|
273
|
+
/** Optional placeholder text shown when no value is selected */
|
|
274
|
+
placeholder?: string;
|
|
275
|
+
}
|
|
276
|
+
/**
|
|
277
|
+
* Radio button field definition for single-value selection with visual options.
|
|
278
|
+
*
|
|
279
|
+
* Allows users to select a single option from a radio button group.
|
|
280
|
+
* Supports visual options with background images for enhanced UI/UX.
|
|
281
|
+
* Options can be provided as simple strings or as objects with label,
|
|
282
|
+
* value, and optional image properties.
|
|
283
|
+
*
|
|
284
|
+
* **Layout Options:**
|
|
285
|
+
* - `columns: 1` (default): Single column list layout
|
|
286
|
+
* - `columns: 2`: Two-column grid layout, ideal for visual options with images
|
|
287
|
+
*
|
|
288
|
+
* @property type - Must be 'radio'
|
|
289
|
+
* @property options - Array of selectable options. Can be strings or objects with label, value, and optional image properties
|
|
290
|
+
* @property defaultValue - Optional default selected value (must match one of the option values)
|
|
291
|
+
* @property columns - Optional number of columns for layout (1 or 2). Defaults to 1
|
|
292
|
+
*
|
|
293
|
+
* @example
|
|
294
|
+
* ```typescript
|
|
295
|
+
* // Single column layout (default)
|
|
296
|
+
* const radioField: StyleEditorRadioField = {
|
|
297
|
+
* type: 'radio',
|
|
298
|
+
* label: 'Alignment',
|
|
299
|
+
* options: ['Left', 'Center', 'Right'],
|
|
300
|
+
* defaultValue: 'left'
|
|
301
|
+
* };
|
|
302
|
+
*
|
|
303
|
+
* // Two-column grid layout with images
|
|
304
|
+
* const layoutField: StyleEditorRadioField = {
|
|
305
|
+
* type: 'radio',
|
|
306
|
+
* label: 'Layout',
|
|
307
|
+
* columns: 2,
|
|
308
|
+
* options: [
|
|
309
|
+
* {
|
|
310
|
+
* label: 'Left',
|
|
311
|
+
* value: 'left',
|
|
312
|
+
* imageURL: 'https://example.com/layout-left.png',
|
|
313
|
+
* width: 80,
|
|
314
|
+
* height: 50
|
|
315
|
+
* },
|
|
316
|
+
* {
|
|
317
|
+
* label: 'Right',
|
|
318
|
+
* value: 'right',
|
|
319
|
+
* imageURL: 'https://example.com/layout-right.png',
|
|
320
|
+
* width: 80,
|
|
321
|
+
* height: 50
|
|
322
|
+
* },
|
|
323
|
+
* { label: 'Center', value: 'center' },
|
|
324
|
+
* { label: 'Overlap', value: 'overlap' }
|
|
325
|
+
* ],
|
|
326
|
+
* defaultValue: 'right'
|
|
327
|
+
* };
|
|
328
|
+
* ```
|
|
329
|
+
*/
|
|
330
|
+
export interface StyleEditorRadioField extends StyleEditorBaseField {
|
|
331
|
+
/** Discriminator: must be 'radio' */
|
|
332
|
+
type: 'radio';
|
|
333
|
+
/**
|
|
334
|
+
* Array of selectable options. Can be:
|
|
335
|
+
* - Simple strings (used as both label and value)
|
|
336
|
+
* - Objects with label, value, and optional imageURL, width, height for visual options
|
|
337
|
+
*/
|
|
338
|
+
options: StyleEditorRadioOption[];
|
|
339
|
+
/** Optional default selected value (must match one of the option values) */
|
|
340
|
+
defaultValue?: string;
|
|
341
|
+
/**
|
|
342
|
+
* Number of columns to display options in.
|
|
343
|
+
* - `1`: Single column list layout (default)
|
|
344
|
+
* - `2`: Two-column grid layout
|
|
345
|
+
*/
|
|
346
|
+
columns?: 1 | 2;
|
|
347
|
+
}
|
|
348
|
+
/**
|
|
349
|
+
* Checkbox group field definition for multiple-value selection.
|
|
350
|
+
*
|
|
351
|
+
* Allows users to select multiple options simultaneously. Each option
|
|
352
|
+
* can be independently checked or unchecked. The defaultValue is a
|
|
353
|
+
* record mapping option values to their boolean checked state.
|
|
354
|
+
*
|
|
355
|
+
* @property type - Must be 'checkboxGroup'
|
|
356
|
+
* @property options - Array of selectable options. Can be strings or objects with label/value
|
|
357
|
+
* @property defaultValue - Optional default checked state as a record mapping option values to boolean
|
|
358
|
+
*
|
|
359
|
+
* @example
|
|
360
|
+
* ```typescript
|
|
361
|
+
* const checkboxField: StyleEditorCheckboxGroupField = {
|
|
362
|
+
* type: 'checkboxGroup',
|
|
363
|
+
* label: 'Text Decoration',
|
|
364
|
+
* options: [
|
|
365
|
+
* { label: 'Underline', value: 'underline' },
|
|
366
|
+
* { label: 'Overline', value: 'overline' },
|
|
367
|
+
* { label: 'Line Through', value: 'line-through' }
|
|
368
|
+
* ],
|
|
369
|
+
* defaultValue: {
|
|
370
|
+
* 'underline': true,
|
|
371
|
+
* 'overline': false,
|
|
372
|
+
* 'line-through': false
|
|
373
|
+
* }
|
|
374
|
+
* };
|
|
375
|
+
* ```
|
|
376
|
+
*/
|
|
377
|
+
export interface StyleEditorCheckboxGroupField extends StyleEditorBaseField {
|
|
378
|
+
/** Discriminator: must be 'checkboxGroup' */
|
|
379
|
+
type: 'checkboxGroup';
|
|
380
|
+
/** Array of selectable options. Can be strings or objects with label and value properties */
|
|
381
|
+
options: StyleEditorOption[];
|
|
382
|
+
/**
|
|
383
|
+
* Optional default checked state as a record mapping option values to boolean.
|
|
384
|
+
* Keys should match the option values, values indicate whether the option is checked.
|
|
385
|
+
*/
|
|
386
|
+
defaultValue?: StyleEditorCheckboxDefaultValue;
|
|
387
|
+
}
|
|
388
|
+
/**
|
|
389
|
+
* Union type of all possible field definitions.
|
|
390
|
+
*
|
|
391
|
+
* Represents any valid field type that can be used in a style editor form.
|
|
392
|
+
* This is a discriminated union type, meaning TypeScript can narrow the type
|
|
393
|
+
* based on the `type` property. Use this type when you need to work with
|
|
394
|
+
* fields of unknown or mixed types.
|
|
395
|
+
*
|
|
396
|
+
* **Supported Field Types:**
|
|
397
|
+
* - `StyleEditorInputField`: Text or number input fields
|
|
398
|
+
* - `StyleEditorDropdownField`: Single-value selection from dropdown
|
|
399
|
+
* - `StyleEditorRadioField`: Single-value selection from radio buttons
|
|
400
|
+
* - `StyleEditorCheckboxGroupField`: Multiple-value selection from checkboxes
|
|
401
|
+
*
|
|
402
|
+
* **Note:** The `switch` field type is reserved for future implementation
|
|
403
|
+
* and is not currently included in this union type.
|
|
404
|
+
*
|
|
405
|
+
* @example
|
|
406
|
+
* ```typescript
|
|
407
|
+
* const fields: StyleEditorField[] = [
|
|
408
|
+
* { type: 'input', label: 'Font Size', inputType: 'number', defaultValue: 16 },
|
|
409
|
+
* { type: 'dropdown', label: 'Font Family', options: ['Arial', 'Helvetica'] },
|
|
410
|
+
* { type: 'radio', label: 'Theme', options: ['Light', 'Dark'] },
|
|
411
|
+
* { type: 'checkboxGroup', label: 'Styles', options: ['Bold', 'Italic'] }
|
|
412
|
+
* ];
|
|
413
|
+
*
|
|
414
|
+
* // TypeScript can narrow the type based on the discriminator
|
|
415
|
+
* function processField(field: StyleEditorField) {
|
|
416
|
+
* if (field.type === 'input') {
|
|
417
|
+
* // field is now narrowed to StyleEditorInputField
|
|
418
|
+
* console.log(field.inputType); // Type-safe access
|
|
419
|
+
* }
|
|
420
|
+
* }
|
|
421
|
+
* ```
|
|
422
|
+
*/
|
|
423
|
+
export type StyleEditorField = StyleEditorInputField | StyleEditorDropdownField | StyleEditorRadioField | StyleEditorCheckboxGroupField;
|
|
424
|
+
/**
|
|
425
|
+
* Section definition for organizing fields in a style editor form.
|
|
426
|
+
*
|
|
427
|
+
* Sections group related fields together with a title. All sections use a
|
|
428
|
+
* single-column layout with a flat array of fields. During normalization,
|
|
429
|
+
* these fields are automatically organized into the multi-dimensional array
|
|
430
|
+
* structure required by UVE.
|
|
431
|
+
*
|
|
432
|
+
* @property title - The section title displayed to users
|
|
433
|
+
* @property fields - Array of field definitions in this section
|
|
434
|
+
*
|
|
435
|
+
* @example
|
|
436
|
+
* ```typescript
|
|
437
|
+
* const section: StyleEditorSection = {
|
|
438
|
+
* title: 'Typography',
|
|
439
|
+
* fields: [
|
|
440
|
+
* { type: 'input', label: 'Font Size', inputType: 'number', defaultValue: 16 },
|
|
441
|
+
* { type: 'dropdown', label: 'Font Family', options: ['Arial', 'Helvetica'] },
|
|
442
|
+
* { type: 'radio', label: 'Alignment', options: ['Left', 'Center', 'Right'] }
|
|
443
|
+
* ]
|
|
444
|
+
* };
|
|
445
|
+
* ```
|
|
446
|
+
*/
|
|
447
|
+
export interface StyleEditorSection {
|
|
448
|
+
/** The section title displayed to users */
|
|
449
|
+
title: string;
|
|
450
|
+
/** Array of field definitions in this section */
|
|
451
|
+
fields: StyleEditorField[];
|
|
452
|
+
}
|
|
453
|
+
/**
|
|
454
|
+
* Complete style editor form definition.
|
|
455
|
+
*
|
|
456
|
+
* Represents the full structure of a style editor form, including
|
|
457
|
+
* the content type identifier and all sections with their fields.
|
|
458
|
+
* This is the developer-friendly format used to define forms before
|
|
459
|
+
* they are normalized and sent to UVE.
|
|
460
|
+
*
|
|
461
|
+
* **Form Structure:**
|
|
462
|
+
* - Each form is associated with a specific content type via `contentType`
|
|
463
|
+
* - Forms contain one or more sections, each with a title and array of fields
|
|
464
|
+
* - All sections use a single-column layout (flat array of fields)
|
|
465
|
+
* - During normalization via `defineStyleEditorForm`, sections are automatically
|
|
466
|
+
* converted to the multi-dimensional array structure required by UVE
|
|
467
|
+
*
|
|
468
|
+
* @property contentType - The content type identifier this form is associated with
|
|
469
|
+
* @property sections - Array of sections, each containing a title and fields array
|
|
470
|
+
*
|
|
471
|
+
* @example
|
|
472
|
+
* ```typescript
|
|
473
|
+
* const form: StyleEditorForm = {
|
|
474
|
+
* contentType: 'my-content-type',
|
|
475
|
+
* sections: [
|
|
476
|
+
* {
|
|
477
|
+
* title: 'Typography',
|
|
478
|
+
* fields: [
|
|
479
|
+
* { type: 'input', label: 'Font Size', inputType: 'number', defaultValue: 16 },
|
|
480
|
+
* { type: 'dropdown', label: 'Font Family', options: ['Arial', 'Helvetica'] },
|
|
481
|
+
* { type: 'radio', label: 'Alignment', options: ['Left', 'Center', 'Right'] }
|
|
482
|
+
* ]
|
|
483
|
+
* },
|
|
484
|
+
* {
|
|
485
|
+
* title: 'Colors',
|
|
486
|
+
* fields: [
|
|
487
|
+
* { type: 'input', label: 'Primary Color', inputType: 'text', defaultValue: '#000000' },
|
|
488
|
+
* { type: 'input', label: 'Secondary Color', inputType: 'text', defaultValue: '#FFFFFF' }
|
|
489
|
+
* ]
|
|
490
|
+
* }
|
|
491
|
+
* ]
|
|
492
|
+
* };
|
|
493
|
+
* ```
|
|
494
|
+
*/
|
|
495
|
+
export interface StyleEditorForm {
|
|
496
|
+
/** The content type identifier this form is associated with */
|
|
497
|
+
contentType: string;
|
|
498
|
+
/** Array of sections, each containing a title and fields */
|
|
499
|
+
sections: StyleEditorSection[];
|
|
500
|
+
}
|
|
501
|
+
/**
|
|
502
|
+
* ============================================================================
|
|
503
|
+
* UVE Style Editor Schema Types
|
|
504
|
+
* ============================================================================
|
|
505
|
+
*
|
|
506
|
+
* The following types represent the normalized schema format sent to UVE
|
|
507
|
+
* (Universal Visual Editor). These are the output types after processing
|
|
508
|
+
* and normalizing the developer-friendly StyleEditorForm definitions.
|
|
509
|
+
* ============================================================================
|
|
510
|
+
*/
|
|
511
|
+
/**
|
|
512
|
+
* Configuration object for normalized field schemas.
|
|
513
|
+
*
|
|
514
|
+
* Contains all possible field-specific properties after normalization.
|
|
515
|
+
* This interface is used by `StyleEditorFieldSchema` to define the `config` property.
|
|
516
|
+
*
|
|
517
|
+
* **Note:** All properties are optional since different field types use different subsets:
|
|
518
|
+
* - Input fields use: `inputType`, `placeholder`, `defaultValue`
|
|
519
|
+
* - Dropdown fields use: `options`, `placeholder`, `defaultValue`
|
|
520
|
+
* - Radio fields use: `options`, `columns`, `defaultValue`
|
|
521
|
+
* - Checkbox fields use: `options`, `defaultValue`
|
|
522
|
+
*/
|
|
523
|
+
export interface StyleEditorFieldSchemaConfig {
|
|
524
|
+
/** Optional input type for input fields ('text' or 'number') */
|
|
525
|
+
inputType?: StyleEditorFieldInputType;
|
|
526
|
+
/** Optional placeholder text shown when the field is empty */
|
|
527
|
+
placeholder?: string;
|
|
528
|
+
/**
|
|
529
|
+
* Optional array of normalized options for dropdown, radio, and checkbox fields.
|
|
530
|
+
* In the normalized schema, options are always in object form (strings are converted).
|
|
531
|
+
* Uses `StyleEditorRadioOptionObject` as the superset that supports all option properties.
|
|
532
|
+
*/
|
|
533
|
+
options?: StyleEditorRadioOptionObject[];
|
|
534
|
+
/**
|
|
535
|
+
* Optional default value. Type depends on field type:
|
|
536
|
+
* - Input fields: string or number
|
|
537
|
+
* - Switch fields: boolean
|
|
538
|
+
* - Checkbox groups: StyleEditorCheckboxDefaultValue
|
|
539
|
+
*/
|
|
540
|
+
defaultValue?: string | number | boolean | StyleEditorCheckboxDefaultValue;
|
|
541
|
+
/**
|
|
542
|
+
* Number of columns to display options in (for radio fields).
|
|
543
|
+
* - `1`: Single column list layout (default)
|
|
544
|
+
* - `2`: Two-column grid layout
|
|
545
|
+
*/
|
|
546
|
+
columns?: 1 | 2;
|
|
547
|
+
}
|
|
548
|
+
/**
|
|
549
|
+
* Normalized field schema sent to UVE.
|
|
550
|
+
*
|
|
551
|
+
* This is the transformed format of field definitions after normalization.
|
|
552
|
+
* All field-specific properties are moved into a `config` object, ensuring
|
|
553
|
+
* a consistent structure that UVE can consume.
|
|
554
|
+
*
|
|
555
|
+
* **Normalization Process:**
|
|
556
|
+
* - Type-specific properties (like `inputType`, `options`, `placeholder`) are moved into `config`
|
|
557
|
+
* - String options are normalized to `{ label, value }` objects
|
|
558
|
+
* - Radio field image properties (`imageURL`, `width`, `height`) are preserved in option objects
|
|
559
|
+
* - The `type` and `label` remain at the top level for easy access
|
|
560
|
+
*
|
|
561
|
+
* @property type - The field type identifier (discriminator for field types)
|
|
562
|
+
* @property label - The human-readable label displayed for this field
|
|
563
|
+
* @property config - Object containing all field-specific configuration properties
|
|
564
|
+
*/
|
|
565
|
+
export interface StyleEditorFieldSchema {
|
|
566
|
+
/** The field type identifier */
|
|
567
|
+
type: StyleEditorFieldType;
|
|
568
|
+
/** The field label */
|
|
569
|
+
label: string;
|
|
570
|
+
/** Object containing all field-specific configuration */
|
|
571
|
+
config: StyleEditorFieldSchemaConfig;
|
|
572
|
+
}
|
|
573
|
+
/**
|
|
574
|
+
* Normalized section schema sent to UVE.
|
|
575
|
+
*
|
|
576
|
+
* Represents a section in the normalized UVE format. All sections
|
|
577
|
+
* use a consistent multi-dimensional array structure (array of arrays),
|
|
578
|
+
* even for single-column layouts. This ensures a uniform schema format
|
|
579
|
+
* that UVE can consume.
|
|
580
|
+
*
|
|
581
|
+
* **Structure:**
|
|
582
|
+
* - The `fields` property is always a two-dimensional array
|
|
583
|
+
* - Each inner array represents a column (currently all sections use a single column)
|
|
584
|
+
* - Each field in the inner arrays is a normalized `StyleEditorFieldSchema` with
|
|
585
|
+
* all properties moved into the `config` object
|
|
586
|
+
*
|
|
587
|
+
* @property title - The section title displayed to users
|
|
588
|
+
* @property fields - Two-dimensional array where each inner array contains normalized field schemas for a column
|
|
589
|
+
*
|
|
590
|
+
* @example
|
|
591
|
+
* ```typescript
|
|
592
|
+
* // Single-column section (normalized format)
|
|
593
|
+
* const sectionSchema: StyleEditorSectionSchema = {
|
|
594
|
+
* title: 'Typography',
|
|
595
|
+
* fields: [
|
|
596
|
+
* // Single column containing all fields
|
|
597
|
+
* [
|
|
598
|
+
* { type: 'input', label: 'Font Size', config: { inputType: 'number', defaultValue: 16 } },
|
|
599
|
+
* { type: 'dropdown', label: 'Font Family', config: { options: [...] } }
|
|
600
|
+
* ]
|
|
601
|
+
* ]
|
|
602
|
+
* };
|
|
603
|
+
* ```
|
|
604
|
+
*/
|
|
605
|
+
export interface StyleEditorSectionSchema {
|
|
606
|
+
/** The section title displayed to users */
|
|
607
|
+
title: string;
|
|
608
|
+
/** Two-dimensional array where each inner array contains normalized field schemas for a column */
|
|
609
|
+
fields: StyleEditorFieldSchema[];
|
|
610
|
+
}
|
|
611
|
+
/**
|
|
612
|
+
* Complete normalized form schema sent to UVE.
|
|
613
|
+
*
|
|
614
|
+
* This is the final output format after normalizing a `StyleEditorForm` using
|
|
615
|
+
* `defineStyleEditorForm`. The form structure is transformed into a consistent
|
|
616
|
+
* schema format that UVE (Universal Visual Editor) can consume.
|
|
617
|
+
*
|
|
618
|
+
* **Normalization Characteristics:**
|
|
619
|
+
* - All sections use the multi-dimensional array structure (`fields: StyleEditorFieldSchema[][]`)
|
|
620
|
+
* - All field-specific properties are moved into `config` objects
|
|
621
|
+
* - String options are normalized to `{ label, value }` objects
|
|
622
|
+
* - The `contentType` identifier is preserved for association with content types
|
|
623
|
+
*
|
|
624
|
+
* This schema format is ready to be sent to UVE via `registerStyleEditorSchemas`.
|
|
625
|
+
*
|
|
626
|
+
* @property contentType - The content type identifier this form is associated with
|
|
627
|
+
* @property sections - Array of normalized section schemas, each with fields organized as a multi-dimensional array
|
|
628
|
+
*
|
|
629
|
+
* @example
|
|
630
|
+
* ```typescript
|
|
631
|
+
* const formSchema: StyleEditorFormSchema = {
|
|
632
|
+
* contentType: 'my-content-type',
|
|
633
|
+
* sections: [
|
|
634
|
+
* {
|
|
635
|
+
* title: 'Typography',
|
|
636
|
+
* fields: [
|
|
637
|
+
* // Single column containing all fields
|
|
638
|
+
* [
|
|
639
|
+
* { type: 'input', label: 'Font Size', config: { inputType: 'number', defaultValue: 16 } },
|
|
640
|
+
* { type: 'dropdown', label: 'Font Family', config: { options: [{ label: 'Arial', value: 'Arial' }] } }
|
|
641
|
+
* ]
|
|
642
|
+
* ]
|
|
643
|
+
* },
|
|
644
|
+
* {
|
|
645
|
+
* title: 'Colors',
|
|
646
|
+
* fields: [
|
|
647
|
+
* [
|
|
648
|
+
* { type: 'input', label: 'Primary Color', config: { inputType: 'text', defaultValue: '#000000' } }
|
|
649
|
+
* ]
|
|
650
|
+
* ]
|
|
651
|
+
* }
|
|
652
|
+
* ]
|
|
653
|
+
* };
|
|
654
|
+
* ```
|
|
655
|
+
*/
|
|
656
|
+
export interface StyleEditorFormSchema {
|
|
657
|
+
/** The content type identifier this form is associated with */
|
|
658
|
+
contentType: string;
|
|
659
|
+
/** Array of normalized section schemas */
|
|
660
|
+
sections: StyleEditorSectionSchema[];
|
|
661
|
+
}
|
package/index.esm.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./src/index";
|
package/internal.esm.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./src/internal";
|
|
File without changes
|
|
File without changes
|