From 1e4d4decf02c19536dd5a3a14733b6633d0ce486 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Tue, 20 Feb 2024 01:12:49 +0400
Subject: [PATCH] Up API docs

---
 docs/api/component.md      |  2 +-
 docs/api/property_stack.md | 22 ++++++++++++++++++++++
 docs/api/trait_manager.md  | 17 +++++++++++++++++
 3 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/docs/api/component.md b/docs/api/component.md
index c2dce16bc..9d9e42e8b 100644
--- a/docs/api/component.md
+++ b/docs/api/component.md
@@ -45,7 +45,7 @@ component.get('tagName');
 *   `layerable` **[Boolean][3]?** Set to `false` if you need to hide the component inside Layers. Default: `true`
 *   `selectable` **[Boolean][3]?** Allow component to be selected when clicked. Default: `true`
 *   `hoverable` **[Boolean][3]?** Shows a highlight outline when hovering on the element if `true`. Default: `true`
-*   `locked` **[Boolean][3]?** Disable the selection of the component and its children in the canvas. Default: `false`
+*   `locked` **[Boolean][3]?** Disable the selection of the component and its children in the canvas. You can unlock a children by setting its locked property to `false`. Default: `undefined`
 *   `void` **[Boolean][3]?** This property is used by the HTML exporter as void elements don't have closing tags, eg. `<br/>`, `<hr/>`, etc. Default: `false`
 *   `style` **[Object][2]?** Component default style, eg. `{ width: '100px', height: '100px', 'background-color': 'red' }`
 *   `styles` **[String][1]?** Component related styles, eg. `.my-component-class { color: red }`
diff --git a/docs/api/property_stack.md b/docs/api/property_stack.md
index 575112749..6d67f1fff 100644
--- a/docs/api/property_stack.md
+++ b/docs/api/property_stack.md
@@ -18,6 +18,16 @@
        return `A: ${values['prop-a']} B: ${values['prop-b']}`;
      }
     ```
+*   `emptyValue` **([String][2] | [Function][4])?** Empty value to apply when all layers are removed.
+    ```js
+     // use simple string
+     emptyValue: 'inherit',
+     // or a function for a custom style object
+     emptyValue: () => ({
+       color: 'unset',
+       width: 'auto'
+     }),
+    ```
 
 ### getLayers
 
@@ -25,6 +35,12 @@ Get all available layers.
 
 Returns **[Array][5]<[Layer]>** 
 
+### hasLayers
+
+Check if the property has layers.
+
+Returns **[Boolean][1]** 
+
 ### getLayer
 
 Get layer by index.
@@ -199,6 +215,12 @@ Get layer separator.
 
 Returns **[RegExp][3]** 
 
+### hasEmptyValue
+
+Check if the property is with an empty value.
+
+Returns **[Boolean][1]** 
+
 [1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
 
 [2]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
diff --git a/docs/api/trait_manager.md b/docs/api/trait_manager.md
index c9bf24d02..fd102d310 100644
--- a/docs/api/trait_manager.md
+++ b/docs/api/trait_manager.md
@@ -24,6 +24,12 @@ tm.select(...)
 ```
 
 ## Available Events
+* `trait:select` New traits selected (eg. by changing a component).
+
+```javascript
+editor.on('trait:select', ({ traits, component }) => { ... });
+```
+
 * `trait:value` Trait value updated.
 
 ```javascript
@@ -114,6 +120,17 @@ tm.getTraitsByCategory(myFilteredTraits);
 
 Returns **[Array][3]\<TraitsByCategory>** 
 
+## getComponent
+
+Get component from the currently selected traits.
+
+### Examples
+
+```javascript
+tm.getComponent();
+// Component {}
+```
+
 ## addType
 
 Add new trait type.