Update PropertyRadio

.eslintrc

@@ -4,7 +4,7 @@
     "node": true
   },
   "parserOptions": {
-    "ecmaVersion": 2018,
+    "ecmaVersion": 2020,
     "sourceType": "module"
   },
   "rules": {

src/i18n/locale/en.js

@@ -86,6 +86,13 @@ export default {
     properties: {
       // float: 'Float',
     }
+    // Translate options in style properties
+    // options: {
+    //   float: { // Id of the property
+    //     ...
+    //     left: 'Left', // {option id}: {Option label}
+    //   }
+    // }
   },
   traitManager: {
     empty: 'Select an element before using Trait Manager',

src/style_manager/model/PropertyRadio.js

@@ -1,37 +1,69 @@
 import Property from './Property';
 
-export default Property.extend({
+export default class PropertyRadio extends Property {
-  defaults: () => ({
+  defaults() {
-    ...Property.prototype.defaults,
+    return {
-    // Array of options, eg. [{name: 'Label ', value: '100'}]
+      ...Property.prototype.defaults,
-    options: [],
+      options: [], // Array of options, eg. [{ id: '100', label: 'Set 100' }]
-    full: 1
+      full: 1
-  }),
+    };
-
+  }
-  initialize(...args) {
-    Property.prototype.initialize.apply(this, args);
-    this.listenTo(this, 'change:options', this.onOptionChange);
-  },
-
-  onOptionChange() {
-    this.set('list', this.get('options'));
-  },
 
+  /**
+   * Get available options.
+   * @returns {Array<Object>} Array of options
+   */
   getOptions() {
+    // support old list property
     const { options, list } = this.attributes;
     return options && options.length ? options : list;
-  },
+  }
 
-  setOptions(opts = []) {
+  /**
-    this.set('options', opts);
+   * Update options.
+   * @param {Array<Object>} value Array of options, eg. `[{ id: 'val-1', label: 'Value 1' }]`
+   */
+  setOptions(value = []) {
+    this.set('options', value);
     return this;
-  },
+  }
 
-  addOption(opt) {
+  /**
-    if (opt) {
+   * Add new option.
+   * @param {Object} value Option object, eg. `{ id: 'val-1', label: 'Value 1' }`
+   */
+  addOption(value) {
+    if (value) {
       const opts = this.getOptions();
-      this.setOptions([...opts, opt]);
+      this.setOptions([...opts, value]);
     }
     return this;
   }
-});
+
+  /**
+   * Get option label.
+   * @param {String} id Option id
+   * @param {Object} [opts={}] Options
+   * @param {Boolean} [opts.locale=true] Use the locale string from i18n module
+   * @returns {String} Option label
+   */
+  getOptionLabel(id, opts = {}) {
+    const { locale = true } = opts;
+    const options = this.getOptions();
+    const option = options.filter(o => o.id === id || o.value === id)[0] || {};
+    const label = option.label || option.name || id;
+    const propId = this.getId();
+    return (
+      (locale && this.em?.t(`styleManager.options.${propId}.${id}`)) || label
+    );
+  }
+
+  initialize(...args) {
+    Property.prototype.initialize.apply(this, args);
+    this.listenTo(this, 'change:options', this.__onOptionChange);
+  }
+
+  __onOptionChange() {
+    this.set('list', this.get('options'));
+  }
+}

src/style_manager/view/PropertyRadioView.js

@@ -2,7 +2,6 @@ import PropertyView from './PropertyView';
 
 export default PropertyView.extend({
   templateInput() {
-    const pfx = this.pfx;
     const ppfx = this.ppfx;
     return `
       <div class="${ppfx}field ${ppfx}field-radio">
@@ -11,32 +10,30 @@ export default PropertyView.extend({
   },
 
   onRender() {
-    const pfx = this.pfx;
+    const { pfx, ppfx, model } = this;
-    const ppfx = this.ppfx;
     const itemCls = `${ppfx}radio-item-label`;
-    const model = this.model;
     const prop = model.get('property');
     const options = model.get('list') || model.get('options') || [];
-    const { cid } = model;
     const clsInput = `${pfx}radio ${pfx}radio-${prop}`;
+    const { cid } = model;
 
     if (!this.input) {
       if (options && options.length) {
         let inputStr = '';
 
-        options.forEach(el => {
+        options.forEach(opt => {
-          let cl = el.className ? `${el.className} ${pfx}icon ${itemCls}` : '';
+          const cls = opt.className
-          let id = `${prop}-${el.value}-${cid}`;
+            ? `${opt.className} ${pfx}icon ${itemCls}`
-          let labelTxt = el.name || el.value;
+            : '';
-          let titleAttr = el.title ? `title="${el.title}"` : '';
+          const id = opt.id || opt.value;
+          const elId = `${prop}-${id}-${cid}`;
+          const labelEl = cls ? '' : model.getOptionLabel(id);
+          const titleAttr = opt.title ? `title="${opt.title}"` : '';
           inputStr += `
             <div class="${ppfx}radio-item">
-              <input type="radio" class="${clsInput}" id="${id}" name="${prop}-${cid}" value="${
+              <input type="radio" class="${clsInput}" id="${elId}" name="${prop}-${cid}" value="${id}"/>
-            el.value
+              <label class="${cls ||
-          }"/>
+                itemCls}" ${titleAttr} for="${elId}">${labelEl}</label>
-              <label class="${cl || itemCls}" ${titleAttr} for="${id}">${
-            cl ? '' : labelTxt
-          }</label>
             </div>
           `;
         });