From c1fc87875d1b6942ce6457160d57dcb71e786452 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Thu, 23 Dec 2021 18:07:01 +0100
Subject: [PATCH] Add PropertyStack in docs

---
 docs/.vuepress/config.js   |   1 +
 docs/api.js                |   1 +
 docs/api/property.md       |   4 +-
 docs/api/property_stack.md | 174 +++++++++++++++++++++++++++++++++++++
 4 files changed, 179 insertions(+), 1 deletion(-)
 create mode 100644 docs/api/property_stack.md

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index 829c5159f..e2649764b 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -77,6 +77,7 @@ module.exports = {
         ['/api/property_number', `${subDivider}PropertyNumber`],
         ['/api/property_select', `${subDivider}PropertySelect`],
         ['/api/property_composite', `${subDivider}PropertyComposite`],
+        ['/api/property_stack', `${subDivider}PropertyStack`],
         ['/api/storage_manager', 'Storage Manager'],
         ['/api/device_manager', 'Device Manager'],
         ['/api/device', `${subDivider}Device`],
diff --git a/docs/api.js b/docs/api.js
index 6f2b71d56..ca9e81726 100644
--- a/docs/api.js
+++ b/docs/api.js
@@ -26,6 +26,7 @@ async function generateDocs () {
     ['style_manager/model/PropertyNumber.js', 'property_number.md'],
     ['style_manager/model/PropertySelect.js', 'property_select.md'],
     ['style_manager/model/PropertyComposite.js', 'property_composite.md'],
+    ['style_manager/model/PropertyStack.js', 'property_stack.md'],
     ['storage_manager/index.js', 'storage_manager.md'],
     ['device_manager/index.js', 'device_manager.md'],
     ['device_manager/model/Device.js', 'device.md'],
diff --git a/docs/api/property.md b/docs/api/property.md
index 8ba102c93..228d263c6 100644
--- a/docs/api/property.md
+++ b/docs/api/property.md
@@ -73,7 +73,9 @@ Get the CSS style object of the property.
 
 #### Parameters
 
-*   `opts`   (optional, default `{}`)
+*   `opts` **[Object][2]** Options (optional, default `{}`)
+
+    *   `opts.camelCase` **[Boolean][3]?** Return property name in camelCase.
 
 #### Examples
 
diff --git a/docs/api/property_stack.md b/docs/api/property_stack.md
new file mode 100644
index 000000000..3937f0012
--- /dev/null
+++ b/docs/api/property_stack.md
@@ -0,0 +1,174 @@
+<!-- Generated by documentation.js. Update this documentation by updating the source code. -->
+
+## PropertyStack
+
+**Extends PropertyComposite**
+
+### Properties
+
+*   `layerSeparator` **([String][1] | [RegExp][2])?** The separator used to split layer values.
+*   `layerJoin` **[String][1]?** Value used to join layer values.
+*   `layerLabel` **[Function][3]?** Custom logic for creating the layer value.
+
+### getLayers
+
+Get all available layers.
+
+Returns **Collection<[Layer]>** 
+
+### getLayer
+
+Get layer by index.
+
+#### Parameters
+
+*   `index` **[Number][4]** Layer index position. (optional, default `0`)
+
+#### Examples
+
+```javascript
+// Get the first layer
+const layerFirst = property.getLayer(0);
+// Get the last layer
+const layers = this.getLayers();
+const layerLast = property.getLayer(layers.length - 1);
+```
+
+Returns **([Layer] | null)** 
+
+### getSelectedLayer
+
+Get selected layer.
+
+Returns **([Layer] | null)** 
+
+### selectLayer
+
+Select layer.
+Without a selected layer any update made on inner properties has no effect.
+
+#### Parameters
+
+*   `layer` **[Layer]** Layer to select
+
+#### Examples
+
+```javascript
+const layer = property.getLayer(0);
+property.selectLayer(layer);
+```
+
+### selectLayerAt
+
+Select layer by index.
+
+#### Parameters
+
+*   `index` **[Number][4]** Index of the layer to select. (optional, default `0`)
+
+#### Examples
+
+```javascript
+property.selectLayerAt(1);
+```
+
+### addLayer
+
+Add new layer to the stack.
+
+#### Parameters
+
+*   `props` **[Object][5]** Custom property values to use in a new layer. (optional, default `{}`)
+*   `opts` **[Object][5]** Options (optional, default `{}`)
+
+    *   `opts.at` **[Number][4]?** Position index (by default the layer will be appended at the end).
+
+#### Examples
+
+```javascript
+// Add new layer at the beginning of the stack with custom values
+property.addLayer({ 'sub-prop1': 'value1', 'sub-prop2': 'value2' }, { at: 0 });
+```
+
+Returns **[Layer]** Added layer.
+
+### removeLayer
+
+Remove layer.
+
+#### Parameters
+
+*   `layer` **[Layer]** Layer to remove.
+
+#### Examples
+
+```javascript
+const layer = property.getLayer(0);
+property.removeLayer(layer);
+```
+
+Returns **[Layer]** Removed layer
+
+### removeLayerAt
+
+Remove layer by index.
+
+#### Parameters
+
+*   `index` **[Number][4]** Index of the layer to remove (optional, default `0`)
+
+#### Examples
+
+```javascript
+property.removeLayerAt(0);
+```
+
+Returns **([Layer] | null)** Removed layer
+
+### getLayerLabel
+
+Get layer label.
+
+#### Parameters
+
+*   `layer` **[Layer]** 
+
+#### Examples
+
+```javascript
+const layer = this.getLayer(1);
+const label = this.getLayerLabel(layer);
+```
+
+Returns **[String][1]** 
+
+### getStyleFromLayer
+
+Get style object from the layer.
+
+#### Parameters
+
+*   `layer` **[Layer]** 
+*   `opts` **[Object][5]** Options (optional, default `{}`)
+
+    *   `opts.camelCase` **[Boolean][6]?** Return property names in camelCase.
+
+Returns **[Object][5]** Style object
+
+### getLayerSeparator
+
+Get layer separator.
+
+Returns **[RegExp][2]** 
+
+[1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
+
+[2]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/RegExp
+
+[3]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
+
+[4]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number
+
+[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
+
+[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean