@dotcms/uve 1.2.1-next.12 → 1.2.1-next.14
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/README.md +1143 -0
- package/index.cjs.js +96 -183
- package/index.esm.js +97 -183
- package/internal.cjs.js +0 -4
- package/internal.esm.js +1 -1
- package/package.json +1 -1
- package/public.cjs.js +8 -78
- package/public.esm.js +9 -75
- package/src/internal/constants.d.ts +0 -2
- package/src/lib/core/core.utils.d.ts +0 -48
- package/src/lib/dom/dom.utils.d.ts +1 -10
- package/src/lib/style-editor/internal.d.ts +7 -7
- package/src/lib/style-editor/public.d.ts +83 -165
- package/src/lib/style-editor/types.d.ts +72 -179
package/index.esm.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { g as getUVEState, s as sendMessageToUVE } from './public.esm.js';
|
|
2
|
-
export { c as createUVESubscription, e as editContentlet,
|
|
2
|
+
export { c as createUVESubscription, e as editContentlet, a as enableBlockEditorInline, i as initInlineEditing, b as initUVE, r as reorderMenu, u as updateNavigation } from './public.esm.js';
|
|
3
3
|
import { UVE_MODE, DotCMSUVEAction } from '@dotcms/types';
|
|
4
4
|
import '@dotcms/types/internal';
|
|
5
5
|
|
|
@@ -11,13 +11,11 @@ import '@dotcms/types/internal';
|
|
|
11
11
|
* This transformation ensures consistency in the schema format sent to UVE.
|
|
12
12
|
*
|
|
13
13
|
* **Field Type Handling:**
|
|
14
|
-
* - **Input fields**: Extracts `inputType
|
|
15
|
-
* - **Dropdown fields**: Normalizes options (strings become `{ label, value }` objects)
|
|
16
|
-
* extracts `placeholder` and `defaultValue` into config
|
|
14
|
+
* - **Input fields**: Extracts `inputType` and `placeholder` into config
|
|
15
|
+
* - **Dropdown fields**: Normalizes options (strings become `{ label, value }` objects)
|
|
17
16
|
* - **Radio fields**: Normalizes options (preserves image properties like `imageURL`, `width`, `height`),
|
|
18
|
-
* extracts `
|
|
19
|
-
* - **Checkbox group fields**: Normalizes options
|
|
20
|
-
* (creates Record<string, boolean> mapping option keys to their boolean values)
|
|
17
|
+
* extracts `columns` into config
|
|
18
|
+
* - **Checkbox group fields**: Normalizes options (converts to format expected by UVE)
|
|
21
19
|
*
|
|
22
20
|
* @experimental This method is experimental and may be subject to change.
|
|
23
21
|
*
|
|
@@ -29,15 +27,16 @@ import '@dotcms/types/internal';
|
|
|
29
27
|
* // Input field normalization
|
|
30
28
|
* normalizeField({
|
|
31
29
|
* type: 'input',
|
|
30
|
+
* id: 'font-size',
|
|
32
31
|
* label: 'Font Size',
|
|
33
32
|
* inputType: 'number',
|
|
34
|
-
* defaultValue: 16,
|
|
35
33
|
* placeholder: 'Enter size'
|
|
36
34
|
* })
|
|
37
35
|
* // Returns: {
|
|
38
36
|
* // type: 'input',
|
|
37
|
+
* // id: 'font-size',
|
|
39
38
|
* // label: 'Font Size',
|
|
40
|
-
* // config: { inputType: 'number',
|
|
39
|
+
* // config: { inputType: 'number', placeholder: 'Enter size' }
|
|
41
40
|
* // }
|
|
42
41
|
*
|
|
43
42
|
* // Dropdown field with string options normalization
|
|
@@ -64,7 +63,6 @@ function normalizeField(field) {
|
|
|
64
63
|
if (field.type === 'input') {
|
|
65
64
|
config.inputType = field.inputType;
|
|
66
65
|
config.placeholder = field.placeholder;
|
|
67
|
-
config.defaultValue = field.defaultValue;
|
|
68
66
|
}
|
|
69
67
|
if (field.type === 'dropdown' || field.type === 'radio') {
|
|
70
68
|
// Normalize options to consistent format
|
|
@@ -72,7 +70,6 @@ function normalizeField(field) {
|
|
|
72
70
|
label: opt,
|
|
73
71
|
value: opt
|
|
74
72
|
} : opt);
|
|
75
|
-
config.defaultValue = field.defaultValue;
|
|
76
73
|
// Handle radio-specific properties
|
|
77
74
|
if (field.type === 'radio') {
|
|
78
75
|
config.columns = field.columns;
|
|
@@ -80,16 +77,11 @@ function normalizeField(field) {
|
|
|
80
77
|
}
|
|
81
78
|
if (field.type === 'checkboxGroup') {
|
|
82
79
|
// Normalize checkbox options - convert to format expected by UVE
|
|
83
|
-
// Options
|
|
80
|
+
// Options have label and key - convert key to 'value' for UVE format
|
|
84
81
|
config.options = field.options.map(opt => ({
|
|
85
82
|
label: opt.label,
|
|
86
83
|
value: opt.key // UVE expects 'value' to be the key identifier
|
|
87
84
|
}));
|
|
88
|
-
// Derive defaultValue from options - map key to boolean value
|
|
89
|
-
config.defaultValue = field.options.reduce((acc, opt) => {
|
|
90
|
-
acc[opt.key] = opt.value;
|
|
91
|
-
return acc;
|
|
92
|
-
}, {});
|
|
93
85
|
}
|
|
94
86
|
return {
|
|
95
87
|
...base,
|
|
@@ -179,14 +171,14 @@ function normalizeSection(section) {
|
|
|
179
171
|
* {
|
|
180
172
|
* title: 'Typography',
|
|
181
173
|
* fields: [
|
|
182
|
-
* { type: 'input', label: 'Font Size', inputType: 'number'
|
|
183
|
-
* { type: 'dropdown', label: 'Font Family', options: ['Arial', 'Helvetica'] }
|
|
174
|
+
* { type: 'input', id: 'font-size', label: 'Font Size', inputType: 'number' },
|
|
175
|
+
* { type: 'dropdown', id: 'font-family', label: 'Font Family', options: ['Arial', 'Helvetica'] }
|
|
184
176
|
* ]
|
|
185
177
|
* },
|
|
186
178
|
* {
|
|
187
179
|
* title: 'Colors',
|
|
188
180
|
* fields: [
|
|
189
|
-
* { type: 'input', label: 'Primary Color', inputType: 'text'
|
|
181
|
+
* { type: 'input', id: 'primary-color', label: 'Primary Color', inputType: 'text' }
|
|
190
182
|
* ]
|
|
191
183
|
* }
|
|
192
184
|
* ]
|
|
@@ -198,8 +190,8 @@ function normalizeSection(section) {
|
|
|
198
190
|
* // title: 'Typography',
|
|
199
191
|
* // fields: [
|
|
200
192
|
* // [
|
|
201
|
-
* // { type: 'input', label: 'Font Size', config: { inputType: 'number'
|
|
202
|
-
* // { type: 'dropdown', label: 'Font Family', config: { options: [...] } }
|
|
193
|
+
* // { type: 'input', id: 'font-size', label: 'Font Size', config: { inputType: 'number' } },
|
|
194
|
+
* // { type: 'dropdown', id: 'font-family', label: 'Font Family', config: { options: [...] } }
|
|
203
195
|
* // ]
|
|
204
196
|
* // ]
|
|
205
197
|
* // },
|
|
@@ -207,7 +199,7 @@ function normalizeSection(section) {
|
|
|
207
199
|
* // title: 'Colors',
|
|
208
200
|
* // fields: [
|
|
209
201
|
* // [
|
|
210
|
-
* // { type: 'input', label: 'Primary Color', config: { inputType: 'text'
|
|
202
|
+
* // { type: 'input', id: 'primary-color', label: 'Primary Color', config: { inputType: 'text' } }
|
|
211
203
|
* // ]
|
|
212
204
|
* // ]
|
|
213
205
|
* // }
|
|
@@ -251,19 +243,19 @@ function normalizeForm(form) {
|
|
|
251
243
|
* title: 'Typography',
|
|
252
244
|
* fields: [
|
|
253
245
|
* styleEditorField.input({
|
|
246
|
+
* id: 'font-size',
|
|
254
247
|
* label: 'Font Size',
|
|
255
|
-
* inputType: 'number'
|
|
256
|
-
* defaultValue: 16
|
|
248
|
+
* inputType: 'number'
|
|
257
249
|
* }),
|
|
258
250
|
* styleEditorField.dropdown({
|
|
251
|
+
* id: 'font-family',
|
|
259
252
|
* label: 'Font Family',
|
|
260
|
-
* options: ['Arial', 'Helvetica']
|
|
261
|
-
* defaultValue: 'Arial'
|
|
253
|
+
* options: ['Arial', 'Helvetica']
|
|
262
254
|
* }),
|
|
263
255
|
* styleEditorField.radio({
|
|
256
|
+
* id: 'alignment',
|
|
264
257
|
* label: 'Alignment',
|
|
265
|
-
* options: ['Left', 'Center', 'Right']
|
|
266
|
-
* defaultValue: 'Left'
|
|
258
|
+
* options: ['Left', 'Center', 'Right']
|
|
267
259
|
* })
|
|
268
260
|
* ]
|
|
269
261
|
* }
|
|
@@ -273,49 +265,36 @@ function normalizeForm(form) {
|
|
|
273
265
|
*/
|
|
274
266
|
const styleEditorField = {
|
|
275
267
|
/**
|
|
276
|
-
* Creates an input field definition
|
|
268
|
+
* Creates an input field definition.
|
|
277
269
|
*
|
|
278
|
-
* Supports both text and number input types
|
|
279
|
-
* enforced based on the `inputType` using TypeScript generics:
|
|
280
|
-
* - When `inputType` is `'number'`, `defaultValue` must be a `number`
|
|
281
|
-
* - When `inputType` is `'text'`, `defaultValue` must be a `string`
|
|
282
|
-
*
|
|
283
|
-
* This provides compile-time type checking to prevent mismatched types,
|
|
284
|
-
* such as passing a string when a number is expected.
|
|
270
|
+
* Supports both text and number input types for different value types.
|
|
285
271
|
*
|
|
286
272
|
* @experimental This method is experimental and may be subject to change.
|
|
287
273
|
*
|
|
288
274
|
* @typeParam T - The input type ('text' or 'number'), inferred from `config.inputType`
|
|
289
275
|
* @param config - Input field configuration
|
|
276
|
+
* @param config.id - The unique identifier for this field
|
|
290
277
|
* @param config.label - The label displayed for this input field
|
|
291
278
|
* @param config.inputType - The type of input ('text' or 'number')
|
|
292
279
|
* @param config.placeholder - Optional placeholder text for the input
|
|
293
|
-
* @param config.defaultValue - Optional default value (type enforced based on inputType)
|
|
294
280
|
* @returns A complete input field definition with type 'input'
|
|
295
281
|
*
|
|
296
282
|
* @example
|
|
297
283
|
* ```typescript
|
|
298
|
-
* // Number input
|
|
284
|
+
* // Number input
|
|
299
285
|
* styleEditorField.input({
|
|
286
|
+
* id: 'font-size',
|
|
300
287
|
* label: 'Font Size',
|
|
301
288
|
* inputType: 'number',
|
|
302
|
-
* placeholder: 'Enter font size'
|
|
303
|
-
* defaultValue: 16 // ✓ Correct: number
|
|
289
|
+
* placeholder: 'Enter font size'
|
|
304
290
|
* })
|
|
305
291
|
*
|
|
306
|
-
* // Text input
|
|
292
|
+
* // Text input
|
|
307
293
|
* styleEditorField.input({
|
|
294
|
+
* id: 'font-name',
|
|
308
295
|
* label: 'Font Name',
|
|
309
296
|
* inputType: 'text',
|
|
310
|
-
* placeholder: 'Enter font name'
|
|
311
|
-
* defaultValue: 'Arial' // ✓ Correct: string
|
|
312
|
-
* })
|
|
313
|
-
*
|
|
314
|
-
* // TypeScript error - type mismatch
|
|
315
|
-
* styleEditorField.input({
|
|
316
|
-
* label: 'Font Size',
|
|
317
|
-
* inputType: 'number',
|
|
318
|
-
* defaultValue: '16' // ✗ Error: Type 'string' is not assignable to type 'number'
|
|
297
|
+
* placeholder: 'Enter font name'
|
|
319
298
|
* })
|
|
320
299
|
* ```
|
|
321
300
|
*/
|
|
@@ -324,94 +303,62 @@ const styleEditorField = {
|
|
|
324
303
|
...config
|
|
325
304
|
}),
|
|
326
305
|
/**
|
|
327
|
-
* Creates a dropdown field definition
|
|
306
|
+
* Creates a dropdown field definition.
|
|
328
307
|
*
|
|
329
308
|
* Allows users to select a single value from a list of options.
|
|
330
309
|
* Options can be provided as simple strings or as objects with label and value.
|
|
331
310
|
*
|
|
332
|
-
* **
|
|
311
|
+
* **Best Practice:** Use `as const` when defining options for better type safety:
|
|
333
312
|
* ```typescript
|
|
334
|
-
* const
|
|
335
|
-
* { label: '
|
|
336
|
-
* { label: '
|
|
313
|
+
* const OPTIONS = [
|
|
314
|
+
* { label: '18', value: '18px' },
|
|
315
|
+
* { label: '24', value: '24px' }
|
|
337
316
|
* ] as const;
|
|
338
317
|
*
|
|
339
318
|
* styleEditorField.dropdown({
|
|
340
|
-
* id: '
|
|
341
|
-
* label: '
|
|
342
|
-
* options
|
|
343
|
-
*
|
|
344
|
-
* // defaultValue: 'three' // ✗ TypeScript error: not assignable
|
|
345
|
-
* })
|
|
346
|
-
* ```
|
|
347
|
-
*
|
|
348
|
-
* Without `as const`, the function still works but won't provide autocomplete:
|
|
349
|
-
* ```typescript
|
|
350
|
-
* styleEditorField.dropdown({
|
|
351
|
-
* id: 'my-field',
|
|
352
|
-
* label: 'Select option',
|
|
353
|
-
* options: [
|
|
354
|
-
* { label: 'The one', value: 'one' },
|
|
355
|
-
* { label: 'The two', value: 'two' }
|
|
356
|
-
* ],
|
|
357
|
-
* defaultValue: 'one' // Works, but no autocomplete
|
|
358
|
-
* })
|
|
319
|
+
* id: 'size',
|
|
320
|
+
* label: 'Size',
|
|
321
|
+
* options: OPTIONS
|
|
322
|
+
* });
|
|
359
323
|
* ```
|
|
360
324
|
*
|
|
361
325
|
* @experimental This method is experimental and may be subject to change.
|
|
362
326
|
*
|
|
363
|
-
* @typeParam TOptions - The options array type (inferred from config, use `as const` for type safety)
|
|
364
327
|
* @param config - Dropdown field configuration (without the 'type' property)
|
|
365
328
|
* @param config.id - The unique identifier for this field
|
|
366
329
|
* @param config.label - The label displayed for this dropdown field
|
|
367
|
-
* @param config.options - Array of options. Use `as const` for type safety
|
|
368
|
-
* @param config.defaultValue - Optional default selected value (type-safe when options are `as const`)
|
|
330
|
+
* @param config.options - Array of options. Can be strings or objects with label and value. Use `as const` for best type safety.
|
|
369
331
|
* @returns A complete dropdown field definition with type 'dropdown'
|
|
370
332
|
*
|
|
371
333
|
* @example
|
|
372
334
|
* ```typescript
|
|
373
|
-
* // With type safety - use 'as const' for autocomplete
|
|
374
|
-
* const options = [
|
|
375
|
-
* { label: 'The one', value: 'one' },
|
|
376
|
-
* { label: 'The two', value: 'two' }
|
|
377
|
-
* ] as const;
|
|
378
|
-
*
|
|
379
|
-
* styleEditorField.dropdown({
|
|
380
|
-
* id: 'my-field',
|
|
381
|
-
* label: 'Select option',
|
|
382
|
-
* options,
|
|
383
|
-
* defaultValue: 'one' // ✓ Autocomplete works!
|
|
384
|
-
* })
|
|
385
|
-
*
|
|
386
335
|
* // Simple string options
|
|
387
336
|
* styleEditorField.dropdown({
|
|
388
337
|
* id: 'font-family',
|
|
389
338
|
* label: 'Font Family',
|
|
390
|
-
* options: ['Arial', 'Helvetica', 'Times New Roman']
|
|
391
|
-
* defaultValue: 'Arial',
|
|
392
|
-
* placeholder: 'Select a font'
|
|
339
|
+
* options: ['Arial', 'Helvetica', 'Times New Roman']
|
|
393
340
|
* })
|
|
394
341
|
*
|
|
395
|
-
* // Object options with custom labels
|
|
342
|
+
* // Object options with custom labels (recommended: use 'as const')
|
|
343
|
+
* const OPTIONS = [
|
|
344
|
+
* { label: 'Light Theme', value: 'light' },
|
|
345
|
+
* { label: 'Dark Theme', value: 'dark' }
|
|
346
|
+
* ] as const;
|
|
347
|
+
*
|
|
396
348
|
* styleEditorField.dropdown({
|
|
397
349
|
* id: 'theme',
|
|
398
350
|
* label: 'Theme',
|
|
399
|
-
* options:
|
|
400
|
-
* { label: 'Light Theme', value: 'light' },
|
|
401
|
-
* { label: 'Dark Theme', value: 'dark' }
|
|
402
|
-
* ],
|
|
403
|
-
* defaultValue: 'light'
|
|
351
|
+
* options: OPTIONS
|
|
404
352
|
* })
|
|
405
353
|
* ```
|
|
406
354
|
*/
|
|
407
355
|
dropdown: config => ({
|
|
408
356
|
type: 'dropdown',
|
|
409
357
|
...config,
|
|
410
|
-
options: config.options
|
|
411
|
-
defaultValue: config.defaultValue
|
|
358
|
+
options: config.options
|
|
412
359
|
}),
|
|
413
360
|
/**
|
|
414
|
-
* Creates a radio button field definition
|
|
361
|
+
* Creates a radio button field definition.
|
|
415
362
|
*
|
|
416
363
|
* Allows users to select a single option from a list. Supports visual
|
|
417
364
|
* options with background images for enhanced UI. Options can be provided
|
|
@@ -421,97 +368,66 @@ const styleEditorField = {
|
|
|
421
368
|
* - `columns: 1` (default): Single column list layout
|
|
422
369
|
* - `columns: 2`: Two-column grid layout, ideal for visual options with images
|
|
423
370
|
*
|
|
424
|
-
* **
|
|
371
|
+
* **Best Practice:** Use `as const` when defining options for better type safety:
|
|
425
372
|
* ```typescript
|
|
426
|
-
* const
|
|
427
|
-
* { label: '
|
|
428
|
-
* { label: '
|
|
373
|
+
* const RADIO_OPTIONS = [
|
|
374
|
+
* { label: 'Left', value: 'left' },
|
|
375
|
+
* { label: 'Right', value: 'right' }
|
|
429
376
|
* ] as const;
|
|
430
377
|
*
|
|
431
378
|
* styleEditorField.radio({
|
|
432
|
-
* id: '
|
|
433
|
-
* label: '
|
|
434
|
-
* options
|
|
435
|
-
*
|
|
436
|
-
* // defaultValue: 'three' // ✗ TypeScript error: not assignable
|
|
437
|
-
* })
|
|
438
|
-
* ```
|
|
439
|
-
*
|
|
440
|
-
* Without `as const`, the function still works but won't provide autocomplete:
|
|
441
|
-
* ```typescript
|
|
442
|
-
* styleEditorField.radio({
|
|
443
|
-
* id: 'my-field',
|
|
444
|
-
* label: 'Select option',
|
|
445
|
-
* options: [
|
|
446
|
-
* { label: 'The one', value: 'one' },
|
|
447
|
-
* { label: 'The two', value: 'two' }
|
|
448
|
-
* ],
|
|
449
|
-
* defaultValue: 'one' // Works, but no autocomplete
|
|
450
|
-
* })
|
|
379
|
+
* id: 'layout',
|
|
380
|
+
* label: 'Layout',
|
|
381
|
+
* options: RADIO_OPTIONS
|
|
382
|
+
* });
|
|
451
383
|
* ```
|
|
452
384
|
*
|
|
453
385
|
* @experimental This method is experimental and may be subject to change.
|
|
454
386
|
*
|
|
455
|
-
* @typeParam TOptions - The options array type (inferred from config, use `as const` for type safety)
|
|
456
387
|
* @param config - Radio field configuration (without the 'type' property)
|
|
457
388
|
* @param config.id - The unique identifier for this field
|
|
458
389
|
* @param config.label - The label displayed for this radio group
|
|
459
|
-
* @param config.options - Array of options. Use `as const` for type safety
|
|
460
|
-
* @param config.defaultValue - Optional default selected value (type-safe when options are `as const`)
|
|
390
|
+
* @param config.options - Array of options. Can be strings or objects with label, value, and optional image properties. Use `as const` for best type safety.
|
|
461
391
|
* @param config.columns - Optional number of columns (1 or 2). Defaults to 1 (single column)
|
|
462
392
|
* @returns A complete radio field definition with type 'radio'
|
|
463
393
|
*
|
|
464
394
|
* @example
|
|
465
395
|
* ```typescript
|
|
466
|
-
* // With type safety - use 'as const' for autocomplete
|
|
467
|
-
* const options = [
|
|
468
|
-
* { label: 'The one', value: 'one' },
|
|
469
|
-
* { label: 'The two', value: 'two' }
|
|
470
|
-
* ] as const;
|
|
471
|
-
*
|
|
472
|
-
* styleEditorField.radio({
|
|
473
|
-
* id: 'my-field',
|
|
474
|
-
* label: 'Select option',
|
|
475
|
-
* options,
|
|
476
|
-
* defaultValue: 'one' // ✓ Autocomplete works!
|
|
477
|
-
* })
|
|
478
|
-
*
|
|
479
396
|
* // Simple string options (single column)
|
|
480
397
|
* styleEditorField.radio({
|
|
481
398
|
* id: 'alignment',
|
|
482
399
|
* label: 'Alignment',
|
|
483
|
-
* options: ['Left', 'Center', 'Right']
|
|
484
|
-
* defaultValue: 'Left'
|
|
400
|
+
* options: ['Left', 'Center', 'Right']
|
|
485
401
|
* })
|
|
486
402
|
*
|
|
487
|
-
* // Two-column grid layout with images
|
|
403
|
+
* // Two-column grid layout with images (recommended: use 'as const')
|
|
404
|
+
* const LAYOUT_OPTIONS = [
|
|
405
|
+
* {
|
|
406
|
+
* label: 'Left',
|
|
407
|
+
* value: 'left',
|
|
408
|
+
* imageURL: 'https://example.com/layout-left.png',
|
|
409
|
+
* },
|
|
410
|
+
* {
|
|
411
|
+
* label: 'Right',
|
|
412
|
+
* value: 'right',
|
|
413
|
+
* imageURL: 'https://example.com/layout-right.png',
|
|
414
|
+
* },
|
|
415
|
+
* { label: 'Center', value: 'center' },
|
|
416
|
+
* { label: 'Overlap', value: 'overlap' }
|
|
417
|
+
* ] as const;
|
|
418
|
+
*
|
|
488
419
|
* styleEditorField.radio({
|
|
489
420
|
* id: 'layout',
|
|
490
421
|
* label: 'Layout',
|
|
491
422
|
* columns: 2,
|
|
492
|
-
* options:
|
|
493
|
-
* {
|
|
494
|
-
* label: 'Left',
|
|
495
|
-
* value: 'left',
|
|
496
|
-
* imageURL: 'https://example.com/layout-left.png',
|
|
497
|
-
* },
|
|
498
|
-
* {
|
|
499
|
-
* label: 'Right',
|
|
500
|
-
* value: 'right',
|
|
501
|
-
* imageURL: 'https://example.com/layout-right.png',
|
|
502
|
-
* },
|
|
503
|
-
* { label: 'Center', value: 'center' },
|
|
504
|
-
* { label: 'Overlap', value: 'overlap' }
|
|
505
|
-
* ],
|
|
506
|
-
* defaultValue: 'right'
|
|
423
|
+
* options: LAYOUT_OPTIONS
|
|
507
424
|
* })
|
|
508
425
|
* ```
|
|
509
426
|
*/
|
|
510
427
|
radio: config => ({
|
|
511
428
|
type: 'radio',
|
|
512
429
|
...config,
|
|
513
|
-
options: config.options
|
|
514
|
-
defaultValue: config.defaultValue
|
|
430
|
+
options: config.options
|
|
515
431
|
}),
|
|
516
432
|
/**
|
|
517
433
|
* Creates a checkbox group field definition.
|
|
@@ -522,8 +438,7 @@ const styleEditorField = {
|
|
|
522
438
|
*
|
|
523
439
|
* **Key Differences from Other Field Types:**
|
|
524
440
|
* - Uses `key` instead of `value` for the identifier (to avoid confusion)
|
|
525
|
-
* -
|
|
526
|
-
* - No separate `defaultValue` property - defaults are embedded in options
|
|
441
|
+
* - Checked state is managed by the form system, not stored in the option definition
|
|
527
442
|
*
|
|
528
443
|
* **Why `key` instead of `value`?**
|
|
529
444
|
* In dropdown and radio fields, `value` represents the actual selected value (string).
|
|
@@ -536,7 +451,7 @@ const styleEditorField = {
|
|
|
536
451
|
* @param config - Checkbox group field configuration (without the 'type' property)
|
|
537
452
|
* @param config.id - The unique identifier for this field
|
|
538
453
|
* @param config.label - The label displayed for this checkbox group
|
|
539
|
-
* @param config.options - Array of checkbox options with label
|
|
454
|
+
* @param config.options - Array of checkbox options with label and key
|
|
540
455
|
* @returns A complete checkbox group field definition with type 'checkboxGroup'
|
|
541
456
|
*
|
|
542
457
|
* @example
|
|
@@ -545,11 +460,10 @@ const styleEditorField = {
|
|
|
545
460
|
* id: 'text-decoration',
|
|
546
461
|
* label: 'Text Decoration',
|
|
547
462
|
* options: [
|
|
548
|
-
* { label: 'Underline', key: 'underline'
|
|
549
|
-
* { label: 'Overline', key: 'overline'
|
|
550
|
-
* { label: 'Line Through', key: 'line-through'
|
|
463
|
+
* { label: 'Underline', key: 'underline' },
|
|
464
|
+
* { label: 'Overline', key: 'overline' },
|
|
465
|
+
* { label: 'Line Through', key: 'line-through' }
|
|
551
466
|
* ]
|
|
552
|
-
* // No defaultValue needed - it's automatically derived from options
|
|
553
467
|
* })
|
|
554
468
|
*
|
|
555
469
|
* // Example with type settings
|
|
@@ -557,10 +471,10 @@ const styleEditorField = {
|
|
|
557
471
|
* id: 'type-settings',
|
|
558
472
|
* label: 'Type settings',
|
|
559
473
|
* options: [
|
|
560
|
-
* { label: 'Bold', key: 'bold'
|
|
561
|
-
* { label: 'Italic', key: 'italic'
|
|
562
|
-
* { label: 'Underline', key: 'underline'
|
|
563
|
-
* { label: 'Strikethrough', key: 'strikethrough'
|
|
474
|
+
* { label: 'Bold', key: 'bold' },
|
|
475
|
+
* { label: 'Italic', key: 'italic' },
|
|
476
|
+
* { label: 'Underline', key: 'underline' },
|
|
477
|
+
* { label: 'Strikethrough', key: 'strikethrough' }
|
|
564
478
|
* ]
|
|
565
479
|
* })
|
|
566
480
|
* ```
|
|
@@ -601,14 +515,14 @@ const styleEditorField = {
|
|
|
601
515
|
* title: 'Typography',
|
|
602
516
|
* fields: [
|
|
603
517
|
* styleEditorField.input({
|
|
518
|
+
* id: 'font-size',
|
|
604
519
|
* label: 'Font Size',
|
|
605
|
-
* inputType: 'number'
|
|
606
|
-
* defaultValue: 16
|
|
520
|
+
* inputType: 'number'
|
|
607
521
|
* }),
|
|
608
522
|
* styleEditorField.dropdown({
|
|
523
|
+
* id: 'font-family',
|
|
609
524
|
* label: 'Font Family',
|
|
610
|
-
* options: ['Arial', 'Helvetica']
|
|
611
|
-
* defaultValue: 'Arial'
|
|
525
|
+
* options: ['Arial', 'Helvetica']
|
|
612
526
|
* })
|
|
613
527
|
* ]
|
|
614
528
|
* },
|
|
@@ -616,14 +530,14 @@ const styleEditorField = {
|
|
|
616
530
|
* title: 'Colors',
|
|
617
531
|
* fields: [
|
|
618
532
|
* styleEditorField.input({
|
|
533
|
+
* id: 'primary-color',
|
|
619
534
|
* label: 'Primary Color',
|
|
620
|
-
* inputType: 'text'
|
|
621
|
-
* defaultValue: '#000000'
|
|
535
|
+
* inputType: 'text'
|
|
622
536
|
* }),
|
|
623
537
|
* styleEditorField.input({
|
|
538
|
+
* id: 'secondary-color',
|
|
624
539
|
* label: 'Secondary Color',
|
|
625
|
-
* inputType: 'text'
|
|
626
|
-
* defaultValue: '#FFFFFF'
|
|
540
|
+
* inputType: 'text'
|
|
627
541
|
* })
|
|
628
542
|
* ]
|
|
629
543
|
* }
|
|
@@ -668,9 +582,9 @@ function defineStyleEditorSchema(form) {
|
|
|
668
582
|
* title: 'Typography',
|
|
669
583
|
* fields: [
|
|
670
584
|
* styleEditorField.input({
|
|
585
|
+
* id: 'font-size',
|
|
671
586
|
* label: 'Font Size',
|
|
672
|
-
* inputType: 'number'
|
|
673
|
-
* defaultValue: 16
|
|
587
|
+
* inputType: 'number'
|
|
674
588
|
* })
|
|
675
589
|
* ]
|
|
676
590
|
* }
|
package/internal.cjs.js
CHANGED
|
@@ -74,8 +74,6 @@ const __BASE_TINYMCE_CONFIG_WITH_NO_DEFAULT__ = {
|
|
|
74
74
|
*/
|
|
75
75
|
const __TINYMCE_PATH_ON_DOTCMS__ = '/ext/tinymcev7/tinymce.min.js';
|
|
76
76
|
|
|
77
|
-
exports.ANALYTICS_WINDOWS_ACTIVE_KEY = _public.ANALYTICS_WINDOWS_ACTIVE_KEY;
|
|
78
|
-
exports.ANALYTICS_WINDOWS_CLEANUP_KEY = _public.ANALYTICS_WINDOWS_CLEANUP_KEY;
|
|
79
77
|
exports.CUSTOM_NO_COMPONENT = _public.CUSTOM_NO_COMPONENT;
|
|
80
78
|
exports.DEVELOPMENT_MODE = _public.DEVELOPMENT_MODE;
|
|
81
79
|
exports.EMPTY_CONTAINER_STYLE_ANGULAR = _public.EMPTY_CONTAINER_STYLE_ANGULAR;
|
|
@@ -94,14 +92,12 @@ exports.getClosestDotCMSContainerData = _public.getClosestDotCMSContainerData;
|
|
|
94
92
|
exports.getColumnPositionClasses = _public.getColumnPositionClasses;
|
|
95
93
|
exports.getContainersData = _public.getContainersData;
|
|
96
94
|
exports.getContentletsInContainer = _public.getContentletsInContainer;
|
|
97
|
-
exports.getDotAnalyticsAttributes = _public.getDotAnalyticsAttributes;
|
|
98
95
|
exports.getDotCMSContainerData = _public.getDotCMSContainerData;
|
|
99
96
|
exports.getDotCMSContentletsBound = _public.getDotCMSContentletsBound;
|
|
100
97
|
exports.getDotCMSPageBounds = _public.getDotCMSPageBounds;
|
|
101
98
|
exports.getDotContainerAttributes = _public.getDotContainerAttributes;
|
|
102
99
|
exports.getDotContentletAttributes = _public.getDotContentletAttributes;
|
|
103
100
|
exports.getUVEState = _public.getUVEState;
|
|
104
|
-
exports.isAnalyticsActive = _public.isAnalyticsActive;
|
|
105
101
|
exports.isValidBlocks = _public.isValidBlocks;
|
|
106
102
|
exports.setBounds = _public.setBounds;
|
|
107
103
|
exports.__BASE_TINYMCE_CONFIG_WITH_NO_DEFAULT__ = __BASE_TINYMCE_CONFIG_WITH_NO_DEFAULT__;
|
package/internal.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export {
|
|
1
|
+
export { C as CUSTOM_NO_COMPONENT, D as DEVELOPMENT_MODE, h as EMPTY_CONTAINER_STYLE_ANGULAR, f as EMPTY_CONTAINER_STYLE_REACT, E as END_CLASS, P as PRODUCTION_MODE, S as START_CLASS, _ as __UVE_EVENTS__, d as __UVE_EVENT_ERROR_FALLBACK__, q as combineClasses, p as computeScrollIsInBottom, c as createUVESubscription, n as findDotCMSElement, o as findDotCMSVTLData, m as getClosestDotCMSContainerData, t as getColumnPositionClasses, w as getContainersData, x as getContentletsInContainer, l as getDotCMSContainerData, k as getDotCMSContentletsBound, j as getDotCMSPageBounds, y as getDotContainerAttributes, v as getDotContentletAttributes, g as getUVEState, A as isValidBlocks, z as setBounds } from './public.esm.js';
|
|
2
2
|
import '@dotcms/types';
|
|
3
3
|
import '@dotcms/types/internal';
|
|
4
4
|
|