diff --git a/src/dom_components/model/Component.ts b/src/dom_components/model/Component.ts index d13524096..07f59033c 100644 --- a/src/dom_components/model/Component.ts +++ b/src/dom_components/model/Component.ts @@ -1063,8 +1063,8 @@ export default class Component extends StyleableModel { 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; } diff --git a/src/dom_components/model/ComponentMap.ts b/src/dom_components/model/ComponentMap.ts index af631566e..585d098eb 100644 --- a/src/dom_components/model/ComponentMap.ts +++ b/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' }, ], }, { diff --git a/src/trait_manager/model/Trait.ts b/src/trait_manager/model/Trait.ts index 32e652f9b..3ff1d0976 100644 --- a/src/trait_manager/model/Trait.ts +++ b/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 { @@ -174,7 +176,7 @@ export default class Trait extends Model { * 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 { * @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); } /** diff --git a/src/trait_manager/model/TraitFactory.ts b/src/trait_manager/model/TraitFactory.ts index 5ed3371ee..e42665fd6 100644 --- a/src/trait_manager/model/TraitFactory.ts +++ b/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); diff --git a/src/trait_manager/types.ts b/src/trait_manager/types.ts index 1dd33d2dd..375fc4077 100644 --- a/src/trait_manager/types.ts +++ b/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[]; + 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}`; diff --git a/src/trait_manager/view/TraitCheckboxView.ts b/src/trait_manager/view/TraitCheckboxView.ts index 8e9d55f1e..6059b9286 100644 --- a/src/trait_manager/view/TraitCheckboxView.ts +++ b/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 { diff --git a/src/trait_manager/view/TraitSelectView.ts b/src/trait_manager/view/TraitSelectView.ts index faf37403b..de6e1d70a 100644 --- a/src/trait_manager/view/TraitSelectView.ts +++ b/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;