From 918c4ba272bee7923e3e964579bd0720e7de10b6 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Fri, 26 Jan 2024 20:00:49 +0400 Subject: [PATCH] Move trait TS --- docs/modules/Traits.md | 12 +-- src/dom_components/model/Component.ts | 3 +- src/dom_components/model/types.ts | 2 +- src/trait_manager/model/Trait.ts | 127 +----------------------- src/trait_manager/model/TraitFactory.ts | 5 +- src/trait_manager/model/Traits.ts | 7 +- src/trait_manager/types.ts | 123 ++++++++++++++++++++++- 7 files changed, 141 insertions(+), 138 deletions(-) diff --git a/docs/modules/Traits.md b/docs/modules/Traits.md index a61d27ac1..198ecf591 100644 --- a/docs/modules/Traits.md +++ b/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', diff --git a/src/dom_components/model/Component.ts b/src/dom_components/model/Component.ts index d5a482c15..d13524096 100644 --- a/src/dom_components/model/Component.ts +++ b/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 {} diff --git a/src/dom_components/model/types.ts b/src/dom_components/model/types.ts index c59a4ce9b..d2d3aafac 100644 --- a/src/dom_components/model/types.ts +++ b/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'; diff --git a/src/trait_manager/model/Trait.ts b/src/trait_manager/model/Trait.ts index d73e5856f..a6292d223 100644 --- a/src/trait_manager/model/Trait.ts +++ b/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[]; - - /** - * 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; -} - -interface TraitSetValueOptions { - partial?: boolean; - [key: string]: unknown; -} - -type TraitOption = { - id: string; - label?: string; -}; - /** * @typedef Trait * @property {String} id Trait id, eg. `my-trait-id`. diff --git a/src/trait_manager/model/TraitFactory.ts b/src/trait_manager/model/TraitFactory.ts index 8653acb05..5ed3371ee 100644 --- a/src/trait_manager/model/TraitFactory.ts +++ b/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; diff --git a/src/trait_manager/model/Traits.ts b/src/trait_manager/model/Traits.ts index b4269cbd0..51414f6ad 100644 --- a/src/trait_manager/model/Traits.ts +++ b/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 { em: EditorModel; diff --git a/src/trait_manager/types.ts b/src/trait_manager/types.ts index 245190074..7c1c819a8 100644 --- a/src/trait_manager/types.ts +++ b/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[]; + + /** + * 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; +} + +export interface TraitSetValueOptions { + partial?: boolean; + [key: string]: unknown; +} + +export type TraitOption = { + id: string; + label?: string; +}; + export type TraitsEvent = `${TraitsEvents}`; /**{START_EVENTS}*/