From 4a66ee68ec58f9e3c4a0c939fd89f5dcc03ab982 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Sat, 3 Nov 2018 13:41:52 +0100 Subject: [PATCH] Update docs --- docs/api/component.md | 27 ++++++++++++++++++++++++++- docs/api/editor.md | 22 ++++++++++++++++++++-- docs/api/style_manager.md | 12 ++++++++++++ 3 files changed, 58 insertions(+), 3 deletions(-) diff --git a/docs/api/component.md b/docs/api/component.md index 3e5b34b8f..9a2e14d4a 100644 --- a/docs/api/component.md +++ b/docs/api/component.md @@ -3,7 +3,7 @@ ## Component The Component object represents a single node of our template structure, so when you update its properties the changes are -immediatly reflected on the canvas and in the code to export (indeed, when you ask to export the code we just go through all +immediately reflected on the canvas and in the code to export (indeed, when you ask to export the code we just go through all the tree of nodes). An example on how to update properties: @@ -36,6 +36,7 @@ component.get('tagName'); will be hidden from the style manager. Default: `true` - `stylable-require` **[Array][4]<[String][1]>?** Indicate an array of style properties to show up which has been marked as `toRequire`. Default: `[]` - `unstylable` **[Array][4]<[String][1]>?** Indicate an array of style properties which should be hidden from the style manager. Default: `[]` +- `style-signature` **[Array][4]<[String][1]>?** This option comes handy when you need to remove or export strictly component-specific rules. Be default, if this option is not empty, the editor will remove rules when there are no components, of that type, in the canvas. Eg. '\['.navbar', '[navbar-']'. Default: `''` - `highlightable` **[Boolean][3]?** It can be highlighted with 'dotted' borders if true. Default: `true` - `copyable` **[Boolean][3]?** True if it's possible to clone the component. Default: `true` - `resizable` **[Boolean][3]?** Indicates if it's possible to resize the component. It's also possible to pass an object as [options for the Resizer][5]. Default: `false` @@ -133,6 +134,7 @@ Update attributes of the component ### Parameters - `attrs` **[Object][2]** Key value attributes +- `opts` (optional, default `{}`) ### Examples @@ -244,6 +246,12 @@ model.removeClass(['class1', 'class2']); Returns **[Array][4]** Array of removed selectors +## getClasses + +Returns component's classes as an array of strings + +Returns **[Array][4]** + ## append Add new component children @@ -302,6 +310,23 @@ component.parent(); Returns **[Component][9]** +## getTrait + +Get the trait by id/name + +### Parameters + +- `id` **[String][1]** The `id` or `name` of the trait + +### Examples + +```javascript +const traitTitle = component.getTrait('title'); +traitTitle && traitTitle.set('label', 'New label'); +``` + +Returns **Trait** Trait model + ## getName Get the name of the component diff --git a/docs/api/editor.md b/docs/api/editor.md index 642f0ccdf..b09b09611 100644 --- a/docs/api/editor.md +++ b/docs/api/editor.md @@ -60,6 +60,7 @@ editor.on('EVENT-NAME', (some, argument) => { ### Style Manager +- `styleManager:update:target` - The target (Component or CSSRule) is changed - `styleManager:change` - Triggered on style property change from new selected component, the view of the property is passed as an argument to the callback - `styleManager:change:{propertyName}` - As above but for a specific style property @@ -149,9 +150,15 @@ Returns **[string][2]** JS string ## getComponents -Returns components in JSON format object +Return the complete tree of components. Use `getWrapper` to include also the wrapper -Returns **[Object][3]** +Returns **Components** + +## getWrapper + +Return the wrapper and its all components + +Returns **Component** ## setComponents @@ -516,6 +523,17 @@ Attach event Returns **this** +## once + +Attach event and detach it after the first run + +### Parameters + +- `event` **[string][2]** Event name +- `callback` **[Function][7]** Callback function + +Returns **this** + ## off Detach event diff --git a/docs/api/style_manager.md b/docs/api/style_manager.md index 58bffabb5..d00efa649 100644 --- a/docs/api/style_manager.md +++ b/docs/api/style_manager.md @@ -277,6 +277,18 @@ someContainer.appendChild(propView.el); Returns **PropertyView** +## setTarget + +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` + +Returns **Styleable** A Component or CSSRule + [1]: https://github.com/artf/grapesjs/blob/master/src/style_manager/config/config.js [2]: #getconfig