@dotcms/uve 1.2.1-next.2 → 1.2.1-next.4

package/index.cjs.js

@@ -56,7 +56,8 @@ require('@dotcms/types/internal');
 function normalizeField(field) {
   const base = {
     type: field.type,
-    label: field.label
+    label: field.label,
+    id: field.id
   };
   const config = {};
   // Handle type-specific properties
@@ -373,7 +374,7 @@ const styleEditorField = {
    *
    * @param config - Radio field configuration (without the 'type' property)
    * @param config.label - The label displayed for this radio group
-   * @param config.options - Array of options. Can be strings or objects with label, value, and optional imageURL, width, height
+   * @param config.options - Array of options. Can be strings or objects with label, value, and optional imageURL
    * @param config.defaultValue - Optional default selected value (must match one of the option values)
    * @param config.columns - Optional number of columns (1 or 2). Defaults to 1 (single column)
    * @returns A complete radio field definition with type 'radio'
@@ -396,15 +397,11 @@ const styleEditorField = {
    *       label: 'Left',
    *       value: 'left',
    *       imageURL: 'https://example.com/layout-left.png',
-   *       width: 80,
-   *       height: 50
    *     },
    *     {
    *       label: 'Right',
    *       value: 'right',
    *       imageURL: 'https://example.com/layout-right.png',
-   *       width: 80,
-   *       height: 50
    *     },
    *     { label: 'Center', value: 'center' },
    *     { label: 'Overlap', value: 'overlap' }

package/index.esm.js

@@ -55,7 +55,8 @@ import '@dotcms/types/internal';
 function normalizeField(field) {
   const base = {
     type: field.type,
-    label: field.label
+    label: field.label,
+    id: field.id
   };
   const config = {};
   // Handle type-specific properties
@@ -372,7 +373,7 @@ const styleEditorField = {
    *
    * @param config - Radio field configuration (without the 'type' property)
    * @param config.label - The label displayed for this radio group
-   * @param config.options - Array of options. Can be strings or objects with label, value, and optional imageURL, width, height
+   * @param config.options - Array of options. Can be strings or objects with label, value, and optional imageURL
    * @param config.defaultValue - Optional default selected value (must match one of the option values)
    * @param config.columns - Optional number of columns (1 or 2). Defaults to 1 (single column)
    * @returns A complete radio field definition with type 'radio'
@@ -395,15 +396,11 @@ const styleEditorField = {
    *       label: 'Left',
    *       value: 'left',
    *       imageURL: 'https://example.com/layout-left.png',
-   *       width: 80,
-   *       height: 50
    *     },
    *     {
    *       label: 'Right',
    *       value: 'right',
    *       imageURL: 'https://example.com/layout-right.png',
-   *       width: 80,
-   *       height: 50
    *     },
    *     { label: 'Center', value: 'center' },
    *     { label: 'Overlap', value: 'overlap' }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dotcms/uve",
-  "version": "1.2.1-next.2",
+  "version": "1.2.1-next.4",
   "description": "Official JavaScript library for interacting with Universal Visual Editor (UVE)",
   "repository": {
     "type": "git",

package/src/lib/style-editor/public.d.ts

@@ -149,7 +149,7 @@ export declare const styleEditorField: {
      *
      * @param config - Radio field configuration (without the 'type' property)
      * @param config.label - The label displayed for this radio group
-     * @param config.options - Array of options. Can be strings or objects with label, value, and optional imageURL, width, height
+     * @param config.options - Array of options. Can be strings or objects with label, value, and optional imageURL
      * @param config.defaultValue - Optional default selected value (must match one of the option values)
      * @param config.columns - Optional number of columns (1 or 2). Defaults to 1 (single column)
      * @returns A complete radio field definition with type 'radio'
@@ -172,15 +172,11 @@ export declare const styleEditorField: {
      *       label: 'Left',
      *       value: 'left',
      *       imageURL: 'https://example.com/layout-left.png',
-     *       width: 80,
-     *       height: 50
      *     },
      *     {
      *       label: 'Right',
      *       value: 'right',
      *       imageURL: 'https://example.com/layout-right.png',
-     *       width: 80,
-     *       height: 50
      *     },
      *     { label: 'Center', value: 'center' },
      *     { label: 'Overlap', value: 'overlap' }

package/src/lib/style-editor/types.d.ts

@@ -9,7 +9,7 @@
  * - `checkboxGroup`: Multiple-value selection from checkbox options
  * - `switch`: Boolean toggle switch (reserved for future implementation)
  */
-export type StyleEditorFieldType = 'input' | 'dropdown' | 'radio' | 'checkboxGroup' | 'switch';
+export type StyleEditorFieldType = 'input' | 'dropdown' | 'radio' | 'checkboxGroup';
 /**
  * Available input types for input fields in the style editor.
  *
@@ -62,6 +62,8 @@ export type StyleEditorInputValueType<T extends StyleEditorFieldInputType> = T e
  * ```
  */
 export interface StyleEditorInputFieldConfig<T extends StyleEditorFieldInputType> {
+    /** The unique identifier for this field */
+    id: string;
     /** The label text displayed to users for this field */
     label: string;
     /** The input type that determines the value type ('text' for strings, 'number' for numbers) */
@@ -95,16 +97,10 @@ export interface StyleEditorOptionObject {
  * @property label - Display label shown to users
  * @property value - Value returned when this option is selected
  * @property imageURL - Optional URL to an image displayed for this option
- * @property width - Optional width of the image in pixels
- * @property height - Optional height of the image in pixels
  */
 export interface StyleEditorRadioOptionObject extends StyleEditorOptionObject {
     /** Optional URL to an image displayed for this option */
     imageURL?: string;
-    /** Optional width of the image in pixels */
-    width?: number;
-    /** Optional height of the image in pixels */
-    height?: number;
 }
 /**
  * Option type for dropdown and checkbox group fields.
@@ -140,9 +136,7 @@ export type StyleEditorOption = string | StyleEditorOptionObject;
  * const imageOption: StyleEditorRadioOption = {
  *   label: 'Left Layout',
  *   value: 'left',
- *   imageURL: 'https://example.com/left-layout.png',
- *   width: 80,
- *   height: 50
+ *   imageURL: 'https://example.com/left-layout.png'
  * };
  * ```
  */
@@ -175,6 +169,8 @@ export type StyleEditorCheckboxDefaultValue = Record<string, boolean>;
  * @property label - The human-readable label displayed for this field in the UI
  */
 export interface StyleEditorBaseField {
+    /** The unique identifier for this field */
+    id: string;
     /** The type of field, used to discriminate between different field types in union types */
     type: StyleEditorFieldType;
     /** The label text displayed to users for this field */
@@ -309,16 +305,12 @@ export interface StyleEditorDropdownField extends StyleEditorBaseField {
  *     {
  *       label: 'Left',
  *       value: 'left',
- *       imageURL: 'https://example.com/layout-left.png',
- *       width: 80,
- *       height: 50
+ *       imageURL: 'https://example.com/layout-left.png'
  *     },
  *     {
  *       label: 'Right',
  *       value: 'right',
- *       imageURL: 'https://example.com/layout-right.png',
- *       width: 80,
- *       height: 50
+ *       imageURL: 'https://example.com/layout-right.png'
  *     },
  *     { label: 'Center', value: 'center' },
  *     { label: 'Overlap', value: 'overlap' }
@@ -333,7 +325,7 @@ export interface StyleEditorRadioField extends StyleEditorBaseField {
     /**
      * Array of selectable options. Can be:
      * - Simple strings (used as both label and value)
-     * - Objects with label, value, and optional imageURL, width, height for visual options
+     * - Objects with label, value, and optional imageURL for visual options
      */
     options: StyleEditorRadioOption[];
     /** Optional default selected value (must match one of the option values) */
@@ -555,7 +547,7 @@ export interface StyleEditorFieldSchemaConfig {
  * **Normalization Process:**
  * - Type-specific properties (like `inputType`, `options`, `placeholder`) are moved into `config`
  * - String options are normalized to `{ label, value }` objects
- * - Radio field image properties (`imageURL`, `width`, `height`) are preserved in option objects
+ * - Radio field image properties (`imageURL`) are preserved in option objects
  * - The `type` and `label` remain at the top level for easy access
  *
  * @property type - The field type identifier (discriminator for field types)
@@ -563,6 +555,8 @@ export interface StyleEditorFieldSchemaConfig {
  * @property config - Object containing all field-specific configuration properties
  */
 export interface StyleEditorFieldSchema {
+    /** The unique identifier for this field */
+    id: string;
     /** The field type identifier */
     type: StyleEditorFieldType;
     /** The field label */