Up trait TS

src/dom_components/model/Component.ts

@@ -1063,8 +1063,8 @@ export default class Component extends StyleableModel<ComponentProperties> {
     const attrs = { ...this.get('attributes') };
     const traits = this.traits;
     traits.each(trait => {
-      if (!trait.get('changeProp')) {
-        const name = trait.get('name');
+      if (!trait.changeProp) {
+        const name = trait.getName();
         const value = trait.getInitValue();
         if (name && value) attrs[name] = value;
       }

src/dom_components/model/ComponentMap.ts

@@ -33,8 +33,8 @@ export default class ComponentMap extends ComponentImage {
           name: 'mapType',
           changeProp: true,
           options: [
-            { value: 'q', name: 'Roadmap' },
-            { value: 'w', name: 'Satellite' },
+            { id: 'q', label: 'Roadmap' },
+            { id: 'w', label: 'Satellite' },
           ],
         },
         {

src/trait_manager/model/Trait.ts

@@ -11,11 +11,13 @@ import Traits from './Traits';
 /**
  * @typedef Trait
  * @property {String} id Trait id, eg. `my-trait-id`.
- * @property {String} type Trait type, defines how the trait should rendered. Possible values: `text` (default), `number`, `select`, `checkbox`, `color`, `button`
+ * @property {String} type Trait type, defines how the trait should be rendered. Possible values: `text` (default), `number`, `select`, `checkbox`, `color`, `button`
  * @property {String} label The trait label to show for the rendered trait.
  * @property {String} name The name of the trait used as a key for the attribute/property. By default, the name is used as attribute name or property in case `changeProp` in enabled.
+ * @property {String} default Default value to use in case the value is not defined on the component.
+ * @property {String} placeholder Placeholder to show inside the default input (if the UI type allows it).
  * @property {String} [category=''] Trait category.
- * @property {Boolean} changeProp If `true` the trait value is applied on component
+ * @property {Boolean} changeProp If `true`, the trait value is applied on the component property, otherwise, on component attributes.
  *
  */
 export default class Trait extends Model<TraitProperties> {
@@ -174,7 +176,7 @@ export default class Trait extends Model<TraitProperties> {
    * Get trait options.
    */
   getOptions(): TraitOption[] {
-    return (this.get('options') as TraitOption[]) || [];
+    return this.get('options') || [];
   }
 
   /**
@@ -192,8 +194,8 @@ export default class Trait extends Model<TraitProperties> {
    * @param {Object} option Option object
    * @returns {String} Option id
    */
-  getOptionId(option: TraitOption) {
-    return option.id || (option as any).value;
+  getOptionId(option: TraitOption): string {
+    return option.id || (option.value as string);
   }
 
   /**

src/trait_manager/model/TraitFactory.ts

@@ -28,7 +28,7 @@ export default class TraitFactory {
       case 'target':
         obj.type = 'select';
         obj.default = false;
-        obj.options = this.config.optionsTarget;
+        obj.options = this.config.optionsTarget as any;
         break;
     }
     return new Trait(obj, em);

src/trait_manager/types.ts

@@ -40,7 +40,7 @@ export interface TraitCustomData {
 
 export interface TraitProperties {
   /**
-   * Trait type, defines how the trait should rendered.
+   * Trait type, defines how the trait should be rendered.
    * Possible values: `text` (default), `number`, `select`, `checkbox`, `color`, `button`
    */
   type?: string;
@@ -69,7 +69,8 @@ export interface TraitProperties {
   label?: string | false;
 
   /**
-   * If `true` the trait value is applied on component
+   * If `true`, the trait value is applied on the component property, otherwise, on component attributes.
+   * @default false
    */
   changeProp?: boolean;
 
@@ -124,14 +125,14 @@ export interface TraitProperties {
   default?: any;
 
   /**
-   * Placeholder to show inside the input.
+   * Placeholder to show inside the default input (if the UI type allows it).
    */
   placeholder?: string;
 
   /**
    * Array of options for the select type.
    */
-  options?: Record<string, any>[];
+  options?: TraitOption[];
 
   /**
    * Label text to use for the button type.
@@ -163,10 +164,11 @@ export interface TraitGetValueOptions {
   useType?: boolean;
 }
 
-export type TraitOption = {
+export interface TraitOption {
   id: string;
   label?: string;
-};
+  [key: string]: unknown;
+}
 
 export type TraitsEvent = `${TraitsEvents}`;
 

src/trait_manager/view/TraitCheckboxView.ts

@@ -39,7 +39,7 @@ export default class TraitCheckboxView extends TraitView {
       const { valueFalse } = model.attributes;
       const name = model.getName();
 
-      if (model.get('changeProp')) {
+      if (model.changeProp) {
         checked = target.get(name);
         targetValue = checked;
       } else {

src/trait_manager/view/TraitSelectView.ts

@@ -41,7 +41,7 @@ export default class TraitSelectView extends TraitView {
         } else {
           name = el.name || el.label || el.value;
           value = `${isUndefined(el.value) ? el.id : el.value}`.replace(/"/g, '"');
-          style = el.style ? el.style.replace(/"/g, '"') : '';
+          style = el.style ? (el.style as string).replace(/"/g, '"') : '';
           attrs += style ? ` style="${style}"` : '';
         }
         const resultName = em.t(`traitManager.traits.options.${propName}.${value}`) || name;