From 859cf713a354b7a8f2487a6e7be72965858b90a8 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Sat, 1 Apr 2023 15:01:45 +0400 Subject: [PATCH] Up docs --- docs/api.js | 1 + docs/api/component.md | 16 +++- docs/api/editor.md | 3 +- docs/api/selector_manager.md | 113 ++++++++++++++++---------- docs/api/style_manager.md | 2 + src/dom_components/model/Component.ts | 8 +- src/pages/index.ts | 1 + src/style_manager/model/Property.ts | 4 +- 8 files changed, 96 insertions(+), 52 deletions(-) diff --git a/docs/api.js b/docs/api.js index 6fbbf2181..57b353afd 100644 --- a/docs/api.js +++ b/docs/api.js @@ -65,6 +65,7 @@ async function generateDocs () { .replace(/\| \\\[/g, '| [') .replace(/\\n```js/g, '```js') .replace(/docsjs\./g, '') + .replace('**Extends ModuleModel**', '') .replace('**Extends Model**', ''); fs.writeFileSync(`${docRoot}/api/${file[1]}`, res); log('Created', file[1]); diff --git a/docs/api/component.md b/docs/api/component.md index c0f2cc4c3..333c0c4a1 100644 --- a/docs/api/component.md +++ b/docs/api/component.md @@ -117,10 +117,16 @@ To get more about this feature read: [https://github.com/GrapesJS/grapesjs/issue ### Parameters -* `value` **[String][1]** Drag mode, options: 'absolute' | 'translate' +* `value` **[String][1]** Drag mode, options: `'absolute'` | `'translate'` | `''` Returns **this** +## getDragMode + +Get the drag mode of the component. + +Returns **[String][1]** Drag mode value, options: `'absolute'` | `'translate'` | `''` + ## find Find inner components by query string. @@ -619,7 +625,13 @@ Returns **[Array][5]\** Array of added traits ## getName -Get the name of the component +Get the name of the component. + +### Parameters + +* `opts` **[Object][2]** Options (optional, default `{}`) + + * `opts.noCustom` **[Boolean][3]?** Avoid custom name assigned to the component. Returns **[String][1]** diff --git a/docs/api/editor.md b/docs/api/editor.md index fab23f494..6382a8197 100644 --- a/docs/api/editor.md +++ b/docs/api/editor.md @@ -672,9 +672,8 @@ Trigger event ### Parameters -* `eventName` **[string][18]** -* `args` **...[Array][19]\** * `event` **[string][18]** Event to trigger +* `args` **...[Array][19]\** Returns **this** diff --git a/docs/api/selector_manager.md b/docs/api/selector_manager.md index 0889514ee..71d73c68c 100644 --- a/docs/api/selector_manager.md +++ b/docs/api/selector_manager.md @@ -60,17 +60,18 @@ sm.add(...); * [add][3] * [get][4] * [remove][5] -* [getAll][6] -* [setState][7] -* [getState][8] -* [getStates][9] -* [setStates][10] -* [getSelected][11] -* [addSelected][12] -* [removeSelected][13] -* [getSelectedTargets][14] -* [setComponentFirst][15] -* [getComponentFirst][16] +* [rename][6] +* [getAll][7] +* [setState][8] +* [getState][9] +* [getStates][10] +* [setStates][11] +* [getSelected][12] +* [addSelected][13] +* [removeSelected][14] +* [getSelectedTargets][15] +* [setComponentFirst][16] +* [getComponentFirst][17] [Selector]: selector.html @@ -84,7 +85,7 @@ sm.add(...); Get configuration object -Returns **[Object][17]** +Returns **[Object][18]** ## add @@ -93,8 +94,8 @@ You can pass selectors properties or string identifiers. ### Parameters -* `props` **([Object][17] | [String][18])** Selector properties or string identifiers, eg. `{ name: 'my-class', label: 'My class' }`, `.my-cls` -* `opts` **[Object][17]?** Selector options (optional, default `{}`) +* `props` **([Object][18] | [String][19])** Selector properties or string identifiers, eg. `{ name: 'my-class', label: 'My class' }`, `.my-cls` +* `opts` **[Object][18]?** Selector options (optional, default `{}`) ### Examples @@ -114,8 +115,8 @@ Get the selector by its name/type ### Parameters -* `name` **[String][18]** Selector name or string identifier -* `type` **[number][19]?** +* `name` **[String][19]** Selector name or string identifier +* `type` **[number][20]?** ### Examples @@ -133,7 +134,7 @@ Remove Selector. ### Parameters -* `selector` **([String][18] | [Selector])** Selector instance or Selector string identifier +* `selector` **([String][19] | [Selector])** Selector instance or Selector string identifier * `opts` **RemoveOptions?** ### Examples @@ -146,13 +147,33 @@ selectorManager.remove(selectorManager.get('.myclass')); Returns **[Selector]** Removed Selector +## rename + +Rename Selector. + +### Parameters + +* `selector` **[Selector]** Selector to update. +* `name` **[String][19]** New name for the selector. +* `opts` **SetOptions?** + +### Examples + +```javascript +const selector = selectorManager.get('myclass'); +const result = selectorManager.rename(selector, 'myclass2'); +console.log(result === selector ? 'Selector updated' : 'Selector with this name exists already'); +``` + +Returns **[Selector]** Selector containing the passed name. + ## setState Change the selector state ### Parameters -* `value` **[String][18]** State value +* `value` **[String][19]** State value ### Examples @@ -166,13 +187,13 @@ Returns **this** Get the current selector state value -Returns **[String][18]** +Returns **[String][19]** ## getStates Get states -Returns **[Array][20]<[State]>** +Returns **[Array][21]<[State]>** ## setStates @@ -180,7 +201,7 @@ Set a new collection of states ### Parameters -* `states` **[Array][20]<[Object][17]>** Array of new states +* `states` **[Array][21]<[Object][18]>** Array of new states * `opts` **any?** ### Examples @@ -192,7 +213,7 @@ const states = selectorManager.setStates([ ]); ``` -Returns **[Array][20]<[State]>** +Returns **[Array][21]<[State]>** ## getSelected @@ -205,7 +226,7 @@ const selected = selectorManager.getSelected(); console.log(selected.map(s => s.toString())) ``` -Returns **[Array][20]<[Selector]>** +Returns **[Array][21]<[Selector]>** ## getSelectedAll @@ -218,7 +239,7 @@ const selected = selectorManager.getSelectedAll(); console.log(selected.map(s => s.toString())) ``` -Returns **[Array][20]<[Selector]>** +Returns **[Array][21]<[Selector]>** ## addSelected @@ -226,7 +247,7 @@ Add new selector to all selected components. ### Parameters -* `props` **([Object][17] | [String][18])** Selector properties or string identifiers, eg. `{ name: 'my-class', label: 'My class' }`, `.my-cls` +* `props` **([Object][18] | [String][19])** Selector properties or string identifiers, eg. `{ name: 'my-class', label: 'My class' }`, `.my-cls` ### Examples @@ -240,7 +261,7 @@ Remove a common selector from all selected components. ### Parameters -* `selector` **([String][18] | [Selector])** Selector instance or Selector string identifier +* `selector` **([String][19] | [Selector])** Selector instance or Selector string identifier ### Examples @@ -259,7 +280,7 @@ const targetsToStyle = selectorManager.getSelectedTargets(); console.log(targetsToStyle.map(target => target.getSelectorsString())) ``` -Returns **[Array][20]<([Component] | [CssRule])>** +Returns **[Array][21]<([Component] | [CssRule])>** ## setComponentFirst @@ -269,13 +290,13 @@ of selectors (which would change styles on all components with those classes). ### Parameters -* `value` **[Boolean][21]** +* `value` **[Boolean][22]** ## getComponentFirst Get the value of component-first option. -Returns **[Boolean][21]** +Returns **[Boolean][22]** ## getAll @@ -293,34 +314,36 @@ Returns **Collection<[Selector]>** [5]: #remove -[6]: #getall +[6]: #rename + +[7]: #getall -[7]: #setstate +[8]: #setstate -[8]: #getstate +[9]: #getstate -[9]: #getstates +[10]: #getstates -[10]: #setstates +[11]: #setstates -[11]: #getselected +[12]: #getselected -[12]: #addselected +[13]: #addselected -[13]: #removeselected +[14]: #removeselected -[14]: #getselectedtargets +[15]: #getselectedtargets -[15]: #setcomponentfirst +[16]: #setcomponentfirst -[16]: #getcomponentfirst +[17]: #getcomponentfirst -[17]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object +[18]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object -[18]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String +[19]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String -[19]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number +[20]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number -[20]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array +[21]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array -[21]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean +[22]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean diff --git a/docs/api/style_manager.md b/docs/api/style_manager.md index f50708bb0..c33e9c7aa 100644 --- a/docs/api/style_manager.md +++ b/docs/api/style_manager.md @@ -71,6 +71,8 @@ styleManager.addSector(...); [Property]: property.html +## Sectors + ## getConfig Get configuration object diff --git a/src/dom_components/model/Component.ts b/src/dom_components/model/Component.ts index aab8f1c0c..985ff8f40 100644 --- a/src/dom_components/model/Component.ts +++ b/src/dom_components/model/Component.ts @@ -112,7 +112,9 @@ export const keyUpdateInside = `${keyUpdate}-inside`; * @module docsjs.Component */ export default class Component extends StyleableModel { - /** @ts-ignore */ + /** + * @private + * @ts-ignore */ get defaults(): ComponentDefinitionDefined { return { tagName: 'div', @@ -195,7 +197,9 @@ export default class Component extends StyleableModel { prevColl?: Components; __hasUm?: boolean; __symbReady?: boolean; - /** @ts-ignore */ + /** + * @private + * @ts-ignore */ collection!: Components; initialize(props = {}, opt: ComponentOptions = {}) { diff --git a/src/pages/index.ts b/src/pages/index.ts index dd5d6d348..1de792f74 100644 --- a/src/pages/index.ts +++ b/src/pages/index.ts @@ -104,6 +104,7 @@ export default class PageManager extends ItemManagerModule = PropertyProps> ext return result(this.prototype, 'defaults'); } - /** @ts-ignore */ + /** + * @private + * @ts-ignore */ defaults() { return { name: '',