Move trait TS

docs/modules/Traits.md

@@ -36,14 +36,14 @@ editor.Components.addType('input', {
           'name', // Same as: { type: 'text', name: 'name' }
           'placeholder',
           {
-            type: 'select', // Type of the trait
+            type: 'select', // Type of the trait (required)
+            name: 'type', // The name of the attribute/property to use on component (required)
             label: 'Type', // The label you will see in Settings
-            name: 'type', // The name of the attribute/property to use on component
             options: [
-              { id: 'text', name: 'Text'},
-              { id: 'email', name: 'Email'},
-              { id: 'password', name: 'Password'},
-              { id: 'number', name: 'Number'},
+              { id: 'text', label: 'Text'},
+              { id: 'email', label: 'Email'},
+              { id: 'password', label: 'Password'},
+              { id: 'number', label: 'Number'},
             ]
           }, {
             type: 'checkbox',

src/dom_components/model/Component.ts

@@ -34,8 +34,9 @@ import { DomComponentsConfig } from '../config/config';
 import ComponentView from '../view/ComponentView';
 import { AddOptions, ExtractMethods, ObjectAny, PrevToNewIdMap, SetOptions } from '../../common';
 import CssRule, { CssRuleJSON } from '../../css_composer/model/CssRule';
-import Trait, { TraitProperties } from '../../trait_manager/model/Trait';
+import Trait from '../../trait_manager/model/Trait';
 import { ToolbarButtonProps } from './ToolbarButton';
+import { TraitProperties } from '../../trait_manager/types';
 
 export interface IComponent extends ExtractMethods<Component> {}
 

src/dom_components/model/types.ts

@@ -2,7 +2,7 @@ import Frame from '../../canvas/model/Frame';
 import { Nullable } from '../../common';
 import EditorModel from '../../editor/model/Editor';
 import Selectors from '../../selector_manager/model/Selectors';
-import { TraitProperties } from '../../trait_manager/model/Trait';
+import { TraitProperties } from '../../trait_manager/types';
 import Traits from '../../trait_manager/model/Traits';
 import { ResizerOptions } from '../../utils/Resizer';
 import { DomComponentsConfig } from '../config/config';

src/trait_manager/model/Trait.ts

@@ -1,134 +1,13 @@
 import { isString, isUndefined } from 'underscore';
+import Category from '../../abstract/ModuleCategory';
 import { LocaleOptions, Model, SetOptions } from '../../common';
 import Component from '../../dom_components/model/Component';
-import Editor from '../../editor';
 import EditorModel from '../../editor/model/Editor';
-import TraitView from '../view/TraitView';
 import { isDef } from '../../utils/mixins';
-import Category, { CategoryProperties } from '../../abstract/ModuleCategory';
+import { TraitOption, TraitProperties, TraitSetValueOptions } from '../types';
+import TraitView from '../view/TraitView';
 import Traits from './Traits';
 
-/** @private */
-export interface TraitProperties {
-  /**
-   * Trait type, defines how the trait should rendered.
-   * Possible values: `text` (default), `number`, `select`, `checkbox`, `color`, `button`
-   */
-  type?: string;
-
-  /**
-   * 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.
-   */
-  name?: string;
-
-  /**
-   * Trait id, eg. `my-trait-id`.
-   * If not specified, the `name` will be used as id.
-   */
-  id?: string | number;
-
-  /**
-   * Trait category.
-   * @default ''
-   */
-  category?: string | CategoryProperties;
-
-  /**
-   * The trait label to show for the rendered trait.
-   */
-  label?: string | false;
-
-  /**
-   * If `true` the trait value is applied on component
-   */
-  changeProp?: boolean;
-
-  /**
-   * Instead of relying on component props/attributes, define your own
-   * logic on how to get the trait value.
-   */
-  getValue?: (props: { editor: Editor; trait: Trait; component: Component }) => any;
-
-  /**
-   * In conjunction with the `getValue`, define your own logic for updating the trait value.
-   */
-  setValue?: (props: {
-    value: any;
-    editor: Editor;
-    trait: Trait;
-    component: Component;
-    partial: boolean;
-    options: TraitSetValueOptions;
-    emitUpdate: () => void;
-  }) => void;
-
-  /**
-   * Custom true value for checkbox type.
-   * @default 'true'
-   */
-  valueTrue?: string;
-
-  /**
-   * Custom false value for checkbox type.
-   * * @default 'false'
-   */
-  valueFalse?: string;
-
-  /**
-   * Minimum number value for number type.
-   */
-  min?: number;
-
-  /**
-   * Maximum number value for number type.
-   */
-  max?: number;
-  unit?: string;
-
-  /**
-   * Number of steps for number type.
-   */
-  step?: number;
-  value?: any;
-  target?: Component;
-  default?: any;
-
-  /**
-   * Placeholder to show inside the input.
-   */
-  placeholder?: string;
-
-  /**
-   * Array of options for the select type.
-   */
-  options?: Record<string, any>[];
-
-  /**
-   * Label text to use for the button type.
-   */
-  text?: string;
-  labelButton?: string;
-
-  /**
-   * Command to use for the button type.
-   */
-  command?: string | ((editor: Editor, trait: Trait) => any);
-
-  full?: boolean;
-  attributes?: Record<string, any>;
-}
-
-interface TraitSetValueOptions {
-  partial?: boolean;
-  [key: string]: unknown;
-}
-
-type TraitOption = {
-  id: string;
-  label?: string;
-};
-
 /**
  * @typedef Trait
  * @property {String} id Trait id, eg. `my-trait-id`.

src/trait_manager/model/TraitFactory.ts

@@ -1,7 +1,8 @@
-import { TraitManagerConfig } from '../config/config';
 import { isString } from 'underscore';
-import Trait, { TraitProperties } from './Trait';
 import EditorModel from '../../editor/model/Editor';
+import { TraitManagerConfig } from '../config/config';
+import { TraitProperties } from '../types';
+import Trait from './Trait';
 
 export default class TraitFactory {
   config: Partial<TraitManagerConfig>;

src/trait_manager/model/Traits.ts

@@ -1,12 +1,13 @@
 import { isArray } from 'underscore';
+import TraitManager from '..';
 import { CollectionWithCategories } from '../../abstract/CollectionWithCategories';
+import Categories from '../../abstract/ModuleCategories';
 import { AddOptions } from '../../common';
 import Component from '../../dom_components/model/Component';
 import EditorModel from '../../editor/model/Editor';
-import Trait, { TraitProperties } from './Trait';
+import { TraitProperties } from '../types';
+import Trait from './Trait';
 import TraitFactory from './TraitFactory';
-import Categories from '../../abstract/ModuleCategories';
-import TraitManager from '..';
 
 export default class Traits extends CollectionWithCategories<Trait> {
   em: EditorModel;

src/trait_manager/types.ts

@@ -1,5 +1,6 @@
-import { ItemsByCategory } from '../abstract/ModuleCategory';
+import { CategoryProperties, ItemsByCategory } from '../abstract/ModuleCategory';
 import Component from '../dom_components/model/Component';
+import Editor from '../editor';
 import EditorModel from '../editor/model/Editor';
 import { TraitManagerConfig } from './config/config';
 import Trait from './model/Trait';
@@ -37,6 +38,126 @@ export interface TraitCustomData {
   container?: HTMLElement;
 }
 
+export interface TraitProperties {
+  /**
+   * Trait type, defines how the trait should rendered.
+   * Possible values: `text` (default), `number`, `select`, `checkbox`, `color`, `button`
+   */
+  type?: string;
+
+  /**
+   * 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.
+   */
+  name?: string;
+
+  /**
+   * Trait id, eg. `my-trait-id`.
+   * If not specified, the `name` will be used as id.
+   */
+  id?: string | number;
+
+  /**
+   * Trait category.
+   * @default ''
+   */
+  category?: string | CategoryProperties;
+
+  /**
+   * The trait label to show for the rendered trait.
+   */
+  label?: string | false;
+
+  /**
+   * If `true` the trait value is applied on component
+   */
+  changeProp?: boolean;
+
+  /**
+   * Instead of relying on component props/attributes, define your own
+   * logic on how to get the trait value.
+   */
+  getValue?: (props: { editor: Editor; trait: Trait; component: Component }) => any;
+
+  /**
+   * In conjunction with the `getValue`, define your own logic for updating the trait value.
+   */
+  setValue?: (props: {
+    value: any;
+    editor: Editor;
+    trait: Trait;
+    component: Component;
+    partial: boolean;
+    options: TraitSetValueOptions;
+    emitUpdate: () => void;
+  }) => void;
+
+  /**
+   * Custom true value for checkbox type.
+   * @default 'true'
+   */
+  valueTrue?: string;
+
+  /**
+   * Custom false value for checkbox type.
+   * * @default 'false'
+   */
+  valueFalse?: string;
+
+  /**
+   * Minimum number value for number type.
+   */
+  min?: number;
+
+  /**
+   * Maximum number value for number type.
+   */
+  max?: number;
+  unit?: string;
+
+  /**
+   * Number of steps for number type.
+   */
+  step?: number;
+  value?: any;
+  target?: Component;
+  default?: any;
+
+  /**
+   * Placeholder to show inside the input.
+   */
+  placeholder?: string;
+
+  /**
+   * Array of options for the select type.
+   */
+  options?: Record<string, any>[];
+
+  /**
+   * Label text to use for the button type.
+   */
+  text?: string;
+  labelButton?: string;
+
+  /**
+   * Command to use for the button type.
+   */
+  command?: string | ((editor: Editor, trait: Trait) => any);
+
+  full?: boolean;
+  attributes?: Record<string, any>;
+}
+
+export interface TraitSetValueOptions {
+  partial?: boolean;
+  [key: string]: unknown;
+}
+
+export type TraitOption = {
+  id: string;
+  label?: string;
+};
+
 export type TraitsEvent = `${TraitsEvents}`;
 
 /**{START_EVENTS}*/