From 14b6bae8cb5d92bda0229822b0ef1e46582cbec5 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Fri, 22 Oct 2021 15:50:42 +0200 Subject: [PATCH] Update docs --- docs/.vuepress/config.js | 1 + docs/api.js | 1 + docs/api/component.md | 3 +- docs/api/selector_manager.md | 66 ++++++++++++++++++++---------------- docs/api/state.md | 24 +++++++++++++ docs/api/style_manager.md | 12 ++++--- 6 files changed, 73 insertions(+), 34 deletions(-) create mode 100644 docs/api/state.md diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 42dcc09c6..1ac5c74c6 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -78,6 +78,7 @@ module.exports = { ['/api/device', `${subDivider}Device`], ['/api/selector_manager', 'Selector Manager'], ['/api/selector', `${subDivider}Selector`], + ['/api/state', `${subDivider}State`], ['/api/css_composer', 'CSS Composer'], ['/api/css_rule', `${subDivider}CssRule`], ['/api/modal_dialog', 'Modal'], diff --git a/docs/api.js b/docs/api.js index 43bffe475..a6a49818c 100644 --- a/docs/api.js +++ b/docs/api.js @@ -27,6 +27,7 @@ async function generateDocs () { ['device_manager/model/Device.js', 'device.md'], ['selector_manager/index.js', 'selector_manager.md'], ['selector_manager/model/Selector.js', 'selector.md'], + ['selector_manager/model/State.js', 'state.md'], ['css_composer/index.js', 'css_composer.md'], ['css_composer/model/CssRule.js', 'css_rule.md'], ['modal_dialog/index.js', 'modal_dialog.md'], diff --git a/docs/api/component.md b/docs/api/component.md index ef9a1bf84..89efdf8d5 100644 --- a/docs/api/component.md +++ b/docs/api/component.md @@ -284,7 +284,8 @@ Get the style of the component #### Parameters -* `opts` (optional, default `{}`) +* `options` (optional, default `{}`) +* `optsAdd` (optional, default `{}`) Returns **[Object][2]** diff --git a/docs/api/selector_manager.md b/docs/api/selector_manager.md index 4ec74a1a0..e9937e243 100644 --- a/docs/api/selector_manager.md +++ b/docs/api/selector_manager.md @@ -63,19 +63,23 @@ sm.add(...); * [getAll][6] * [setState][7] * [getState][8] -* [getSelected][9] -* [addSelected][10] -* [removeSelected][11] -* [setComponentFirst][12] -* [getComponentFirst][13] +* [getStates][9] +* [setStates][10] +* [getSelected][11] +* [addSelected][12] +* [removeSelected][13] +* [setComponentFirst][14] +* [getComponentFirst][15] [Selector]: selector.html +[State]: state.html + ## getConfig Get configuration object -Returns **[Object][14]** +Returns **[Object][16]** ## add @@ -84,8 +88,8 @@ You can pass selectors properties or string identifiers. ### Parameters -* `props` **([Object][14] | [String][15])** Selector properties or string identifiers, eg. `{ name: 'my-class', label: 'My class' }`, `.my-cls` -* `opts` **[Object][14]?** Selector options (optional, default `{}`) +* `props` **([Object][16] | [String][17])** Selector properties or string identifiers, eg. `{ name: 'my-class', label: 'My class' }`, `.my-cls` +* `opts` **[Object][16]?** Selector options (optional, default `{}`) ### Examples @@ -105,7 +109,7 @@ Get the selector by its name/type ### Parameters -* `name` **[String][15]** Selector name or string identifier +* `name` **[String][17]** Selector name or string identifier * `type` ### Examples @@ -124,7 +128,7 @@ Remove Selector. ### Parameters -* `selector` **([String][15] | [Selector])** Selector instance or Selector string identifier +* `selector` **([String][17] | [Selector])** Selector instance or Selector string identifier * `opts` ### Examples @@ -143,7 +147,7 @@ Change the selector state ### Parameters -* `value` **[String][15]** State value +* `value` **[String][17]** State value ### Examples @@ -157,13 +161,13 @@ Returns **this** Get the current selector state value -Returns **[String][15]** +Returns **[String][17]** ## getStates Get states -Returns **[Array][16]\** +Returns **[Array][18]<[State]>** ## setStates @@ -171,7 +175,7 @@ Set a new collection of states ### Parameters -* `states` **[Array][16]<[Object][14]>** Array of new states +* `states` **[Array][18]<[Object][16]>** Array of new states * `opts` ### Examples @@ -183,7 +187,7 @@ const states = selectorManager.setStates([ ]); ``` -Returns **[Array][16]\** +Returns **[Array][18]<[State]>** ## getSelected @@ -196,7 +200,7 @@ const selected = selectorManager.getSelected(); console.log(selected.map(s => s.toString())) ``` -Returns **[Array][16]<[Selector]>** +Returns **[Array][18]<[Selector]>** ## addSelected @@ -204,7 +208,7 @@ Add new selector to all selected components. ### Parameters -* `props` **([Object][14] | [String][15])** Selector properties or string identifiers, eg. `{ name: 'my-class', label: 'My class' }`, `.my-cls` +* `props` **([Object][16] | [String][17])** Selector properties or string identifiers, eg. `{ name: 'my-class', label: 'My class' }`, `.my-cls` ### Examples @@ -218,7 +222,7 @@ Remove a common selector from all selected components. ### Parameters -* `selector` **([String][15] | [Selector])** Selector instance or Selector string identifier +* `selector` **([String][17] | [Selector])** Selector instance or Selector string identifier ### Examples @@ -234,13 +238,13 @@ of selectors (which would change styles on all components with those classes). ### Parameters -* `value` **[Boolean][17]** +* `value` **[Boolean][19]** ## getComponentFirst Get the value of component-first option. -Returns **[Boolean][17]** +Returns **[Boolean][19]** ## getAll @@ -264,20 +268,24 @@ Returns **Collection<[Selector]>** [8]: #getstate -[9]: #getselected +[9]: #getstates + +[10]: #setstates + +[11]: #getselected -[10]: #addselected +[12]: #addselected -[11]: #removeselected +[13]: #removeselected -[12]: #setcomponentfirst +[14]: #setcomponentfirst -[13]: #getcomponentfirst +[15]: #getcomponentfirst -[14]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object +[16]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object -[15]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String +[17]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String -[16]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array +[18]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array -[17]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean +[19]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean diff --git a/docs/api/state.md b/docs/api/state.md new file mode 100644 index 000000000..e4f1448d6 --- /dev/null +++ b/docs/api/state.md @@ -0,0 +1,24 @@ + + +## State + + + +### Properties + +* `name` **[String][1]** State name, eg. `hover`, `nth-of-type(2n)` +* `label` **[String][1]** State label, eg. `Hover`, `Even/Odd` + +### getName + +Get state name + +Returns **[String][1]** + +### getLabel + +Get state label + +Returns **[String][1]** + +[1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String diff --git a/docs/api/style_manager.md b/docs/api/style_manager.md index 28f5ac25f..18dc6b56e 100644 --- a/docs/api/style_manager.md +++ b/docs/api/style_manager.md @@ -36,6 +36,10 @@ const styleManager = editor.StyleManager; [Sector]: sector.html +[CssRule]: css_rule.html + +[Component]: component.html + ## getConfig Get configuration object @@ -308,17 +312,17 @@ someContainer.appendChild(propView.el); Returns **PropertyView** -## setTarget +## select Select different target for the Style Manager. It could be a Component, CSSRule, or a string of any CSS selector ### Parameters -* `target` **(Component | CSSRule | [String][17])** -* `opts` +* `target` **([Component] | [CSSRule] | [String][17])** +* `opts` (optional, default `{}`) -Returns **Styleable** A Component or CSSRule +Returns **[Array][19]<(\[Component] | [CSSRule])>** Array containing selected Components or CSSRules [1]: https://github.com/artf/grapesjs/blob/master/src/style_manager/config/config.js