Update Style Manager docs

docs/api/css_composer.md

@@ -131,6 +131,7 @@ Remove rule, by CssRule or matching selector (eg. the selector will match also a
 ### Parameters
 
 *   `rule` **([String][8] | [CssRule] | [Array][9]<[CssRule]>)** CssRule or matching selector.
+*   `opts`  
 
 ### Examples
 

docs/api/layer.md

@@ -1,10 +1,16 @@
 <!-- Generated by documentation.js. Update this documentation by updating the source code. -->
 
+## getId
+
+Get layer id.
+
+Returns **[String][1]** 
+
 ## getIndex
 
 Get layer index.
 
-Returns **[Number][1]** 
+Returns **[Number][2]** 
 
 ## getValues
 
@@ -12,14 +18,60 @@ Get layer values.
 
 ### Parameters
 
-*   `opts` **[Object][2]** Options (optional, default `{}`)
+*   `opts` **[Object][3]** Options (optional, default `{}`)
+
+    *   `opts.camelCase` **[Boolean][4]?** Return property names in camelCase.
+
+Returns **[Object][3]** 
+
+## getLabel
+
+Get layer label.
+
+Returns **[String][1]** 
+
+## isSelected
+
+Check if the layer is selected.
+
+Returns **[Boolean][4]** 
+
+## select
+
+Select the layer.
+
+## remove
+
+Remove the layer.
+
+## move
+
+Move layer to a new index.
+
+### Parameters
+
+*   `index` **[Number][2]** New index
+
+## getStylePreview
+
+Get style object for the preview.
+
+### Parameters
+
+*   `opts` **[Object][3]** Options. Same of `PropertyStack.getStyleFromLayer` (optional, default `{}`)
+
+Returns **[Object][3]** Style object
+
+## hasPreview
+
+Check if the property has the preview enabled for this layer.
 
-    *   `opts.camelCase` **[Boolean][3]?** Return property names in camelCase.
+Returns **[Boolean][4]** 
 
-Returns **[Object][2]** 
+[1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
 
-[1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number
+[2]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number
 
-[2]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
+[3]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
 
-[3]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
+[4]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean

docs/api/property.md

@@ -67,6 +67,12 @@ Check if the property has value.
 
 Returns **[Boolean][3]** 
 
+### hasValueParent
+
+Indicates if the current value is coming from a parent target (eg. another CSSRule).
+
+Returns **[Boolean][3]** 
+
 ### getStyle
 
 Get the CSS style object of the property.
@@ -123,8 +129,28 @@ The change is also propagated to the selected targets (eg. the css property is c
 
     *   `opts.noTarget` **[Boolean][3]** If `true` the change won't be propagated to selected targets. (optional, default `false`)
 
+### canClear
+
+Indicates if the current value comes directly from the selected target and so can be cleared.
+
+Returns **[Boolean][3]** 
+
+### getParent
+
+If the current property is a sub-property, this will return the parent Property.
+
+Returns **([[Property][4]] | null)** 
+
+### isFull
+
+Indicates if the property is full-width in UI.
+
+Returns **[Boolean][3]** 
+
 [1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
 
 [2]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
 
 [3]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
+
+[4]: #property

docs/api/property_composite.md

@@ -4,6 +4,8 @@
 
 **Extends Property**
 
+[Property]: property.html
+
 ### Properties
 
 *   `properties` **[Array][1]<[Object][2]>** Array of sub properties, eg. `[{ type: 'number', property: 'margin-top' }, ...]`
@@ -96,10 +98,6 @@ Get the join value.
 
 Returns **[String][4]** 
 
-##
-
-[Property]: property.html
-
 [1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
 
 [2]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object

docs/api/property_select.md

@@ -62,7 +62,7 @@ Get option label.
 
 #### Parameters
 
-*   `id` **[String][3]** Option id
+*   `id` **([String][3] | [Object][2])** Option id or the option object
 *   `opts` **[Object][2]** Options (optional, default `{}`)
 
     *   `opts.locale` **[Boolean][4]** Use the locale string from i18n module (optional, default `true`)

docs/api/property_stack.md

@@ -23,7 +23,7 @@
 
 Get all available layers.
 
-Returns **Collection<[Layer]>** 
+Returns **[Array][5]<[Layer]>** 
 
 ### getLayer
 
@@ -31,7 +31,7 @@ Get layer by index.
 
 #### Parameters
 
-*   `index` **[Number][5]** Layer index position. (optional, default `0`)
+*   `index` **[Number][6]** Layer index position. (optional, default `0`)
 
 #### Examples
 
@@ -73,7 +73,7 @@ Select layer by index.
 
 #### Parameters
 
-*   `index` **[Number][5]** Index of the layer to select. (optional, default `0`)
+*   `index` **[Number][6]** Index of the layer to select. (optional, default `0`)
 
 #### Examples
 
@@ -81,16 +81,32 @@ Select layer by index.
 property.selectLayerAt(1);
 ```
 
+### moveLayer
+
+Move layer by index.
+
+#### Parameters
+
+*   `layer` **[Layer]** Layer to move.
+*   `index` **[Number][6]** New layer index. (optional, default `0`)
+
+#### Examples
+
+```javascript
+const layer = property.getLayer(1);
+property.moveLayer(layer, 0);
+```
+
 ### addLayer
 
 Add new layer to the stack.
 
 #### Parameters
 
-*   `props` **[Object][6]** Custom property values to use in a new layer. (optional, default `{}`)
+*   `props` **[Object][7]** Custom property values to use in a new layer. (optional, default `{}`)
-*   `opts` **[Object][6]** Options (optional, default `{}`)
+*   `opts` **[Object][7]** Options (optional, default `{}`)
 
-    *   `opts.at` **[Number][5]?** Position index (by default the layer will be appended at the end).
+    *   `opts.at` **[Number][6]?** Position index (by default the layer will be appended at the end).
 
 #### Examples
 
@@ -124,7 +140,7 @@ Remove layer by index.
 
 #### Parameters
 
-*   `index` **[Number][5]** Index of the layer to remove (optional, default `0`)
+*   `index` **[Number][6]** Index of the layer to remove (optional, default `0`)
 
 #### Examples
 
@@ -158,11 +174,24 @@ Get style object from the layer.
 #### Parameters
 
 *   `layer` **[Layer]** 
-*   `opts` **[Object][6]** Options (optional, default `{}`)
+*   `opts` **[Object][7]** Options (optional, default `{}`)
 
     *   `opts.camelCase` **[Boolean][1]?** Return property names in camelCase.
+    *   `opts.number` **[Object][7]?** Limit the result of the number types, eg. `number: { min: -3, max: 3 }`
+
+Returns **[Object][7]** Style object
+
+### getStylePreview
 
-Returns **[Object][6]** Style object
+Get preview style object from the layer.
+If the property has `preview: false` the returned object will be empty.
+
+#### Parameters
+
+*   `layer` **[Layer]** 
+*   `opts` **[Object][7]** Options. Same of `getStyleFromLayer` (optional, default `{}`)
+
+Returns **[Object][7]** Style object
 
 ### getLayerSeparator
 
@@ -178,6 +207,8 @@ Returns **[RegExp][3]**
 
 [4]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
 
-[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number
+[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
+
+[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number
 
-[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
+[7]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object

docs/api/sector.md

@@ -4,6 +4,8 @@
 
 
 
+[Property]: property.html
+
 ### Properties
 
 *   `id` **[String][1]** Sector id, eg. `typography`
@@ -64,10 +66,6 @@ Get sector properties.
 
 Returns **[Array][3]<[Property]>** 
 
-##
-
-[Property]: property.html
-
 [1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
 
 [2]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean

docs/api/style_manager.md

@@ -27,10 +27,18 @@ styleManager.addSector(...);
 ## Available Events
 
 *   `style:sector:add` - Sector added. The [Sector] is passed as an argument to the callback.
+*   `style:sector:remove` - Sector removed. The [Sector] is passed as an argument to the callback.
+*   `style:sector:update` - Sector updated. The [Sector] and the object containing changes are passed as arguments to the callback.
+*   `style:property:add` - Property added. The [Property] is passed as an argument to the callback.
+*   `style:property:remove` - Property removed. The [Property] is passed as an argument to the callback.
+*   `style:property:update` - Property updated. The [Property] and the object containing changes are passed as arguments to the callback.
 *   `style:target` - Target selection changed. The target (or `null` in case the target is deselected) is passed as an argument to the callback.
-*   `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
+* `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
+-->
 
 ## Methods
 
@@ -45,7 +53,7 @@ styleManager.addSector(...);
 *   [removeProperty][10]
 *   [select][11]
 *   [getSelected][12]
-*   [getLastSelected][13]
+*   [getSelectedAll][13]
 *   [getSelectedParents][14]
 *   [addStyleTargets][15]
 *   [getBuiltIn][16]
@@ -118,7 +126,9 @@ Get all sectors.
 
 ### Parameters
 
-*   `opts`   (optional, default `{}`)
+*   `opts` **[Object][23]** Options (optional, default `{}`)
+
+    *   `opts.visible` **[Boolean][27]?** Returns only visible sectors
 
 ### Examples
 
@@ -126,7 +136,7 @@ Get all sectors.
 const sectors = styleManager.getSectors();
 ```
 
-Returns **Collection<[Sector]>** Collection of sectors
+Returns **[Array][28]<[Sector]>** 
 
 ## removeSector
 
@@ -151,7 +161,7 @@ Add new property to the sector.
 ### Parameters
 
 *   `sectorId` **[String][24]** Sector id.
-*   `property` **[Object][23]** Property definition. Check the [base available properties][27] + others based on the `type` of your property.
+*   `property` **[Object][23]** Property definition. Check the [base available properties][29] + others based on the `type` of your property.
 *   `opts` **[Object][23]** Options (optional, default `{}`)
 
     *   `opts.at` **[Number][26]?** Position index (by default, will be appended at the end).
@@ -249,17 +259,17 @@ Returns **[Array][28]<([Component] | [CSSRule])>** Array containing selected Com
 
 ## getSelected
 
-Get the array of selected targets.
-
-Returns **[Array][28]<([Component] | [CSSRule])>** 
-
-## getLastSelected
-
 Get the last selected target.
 By default, the Style Manager shows styles of the last selected target.
 
 Returns **([Component] | [CSSRule] | null)** 
 
+## getSelectedAll
+
+Get the array of selected targets.
+
+Returns **[Array][28]<([Component] | [CSSRule])>** 
+
 ## getSelectedParents
 
 Get parent rules of the last selected target.
@@ -377,31 +387,6 @@ Get all types
 
 Returns **[Array][28]** 
 
-## createType
-
-Create new property from type
-
-### Parameters
-
-*   `id` **[string][24]** Type ID
-*   `options` **[Object][23]** Options (optional, default `{}`)
-
-    *   `options.model` **[Object][23]** Custom model object (optional, default `{}`)
-    *   `options.view` **[Object][23]** Custom view object (optional, default `{}`)
-
-### Examples
-
-```javascript
-const propView = styleManager.createType('integer', {
- model: {units: ['px', 'rem']}
-});
-propView.render();
-propView.model.on('change:value', ...);
-someContainer.appendChild(propView.el);
-```
-
-Returns **PropertyView** 
-
 [1]: https://github.com/artf/grapesjs/blob/master/src/style_manager/config/config.js
 
 [2]: #getconfig
@@ -426,7 +411,7 @@ Returns **PropertyView**
 
 [12]: #getselected
 
-[13]: #getlastselected
+[13]: #getselectedall
 
 [14]: #getselectedparents
 
@@ -454,6 +439,8 @@ Returns **PropertyView**
 
 [26]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number
 
-[27]: property.html#properties
+[27]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
 
 [28]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
+
+[29]: property.html#properties

docs/modules/Style-manager.md

@@ -575,11 +575,14 @@ const wrapperCmp = editor.Pages.getSelected().getMainComponent();
 const btnCmp = wrapperCmp.find('button')[0];
 btnCmp && sm.select(btnCmp);
 
-// You can also select as a target some CSS query
+// You can also select CSS query as a target
 sm.select('.btn > span');
 
-// Once the target is selected, you can check its current style object.
+// Once the target is selected, you can check its current style object
+console.log(sm.getSelected()?.getStyle());
 
+// and update all selected target styles when necessary
+sm.addStyleTargets({ color: 'red' });
 ```
 
 <!--