Add PropertyComposite in docs

docs/.vuepress/config.js

@@ -76,6 +76,7 @@ module.exports = {
         ['/api/property', `${subDivider}Property`],
         ['/api/property_number', `${subDivider}PropertyNumber`],
         ['/api/property_select', `${subDivider}PropertySelect`],
+        ['/api/property_composite', `${subDivider}PropertyComposite`],
         ['/api/storage_manager', 'Storage Manager'],
         ['/api/device_manager', 'Device Manager'],
         ['/api/device', `${subDivider}Device`],

docs/api.js

@@ -25,6 +25,7 @@ async function generateDocs () {
     ['style_manager/model/Property.js', 'property.md'],
     ['style_manager/model/PropertyNumber.js', 'property_number.md'],
     ['style_manager/model/PropertySelect.js', 'property_select.md'],
+    ['style_manager/model/PropertyComposite.js', 'property_composite.md'],
     ['storage_manager/index.js', 'storage_manager.md'],
     ['device_manager/index.js', 'device_manager.md'],
     ['device_manager/model/Device.js', 'device.md'],

docs/api/property_composite.md

@@ -0,0 +1,99 @@
+<!-- Generated by documentation.js. Update this documentation by updating the source code. -->
+
+## PropertyComposite
+
+**Extends Property**
+
+### Properties
+
+*   `properties` **[Array][1]<[Object][2]>** Array of sub properties, eg. `[{ type: 'number', property: 'margin-top' }, ...]`
+*   `detached` **[Boolean][3]?** Indicate if the final CSS property is splitted (detached: `margin-top: X; margin-right: Y; ...`) or combined (not detached: `margin: X Y ...;`)
+*   `separator` **([String][4] | [RegExp][5])?** Separator to use to split property values.
+*   `join` **[String][4]?** Value used to join property values
+*   `fromStyle` **[Function][6]?** Custom logic for getting property values from the target style object, eg.
+    `  fromStyle(style) => {
+       return {};
+     } `
+*   `toStyle` **[Function][6]?** Custom logic for creating the CSS style object to apply on selected targets.
+
+### getProperties
+
+Get properties.
+
+Returns **[Array][1]<[Property]>** 
+
+### getProperty
+
+Get property by id.
+
+#### Parameters
+
+*   `id` **[String][4]** Property id.
+
+Returns **([Property] | null)** 
+
+### getPropertyAt
+
+Get property at index.
+
+#### Parameters
+
+*   `index` **[Number][7]** 
+
+Returns **([Property] | null)** 
+
+### isDetached
+
+Check if the property is detached.
+
+Returns **[Boolean][3]** 
+
+### getValues
+
+Get current values of properties.
+
+#### Parameters
+
+*   `opts` **[Object][2]** Options (optional, default `{}`)
+
+    *   `opts.byName` **[Boolean][3]** Use property names as a key instead of the id. (optional, default `false`)
+
+#### Examples
+
+```javascript
+// In case the property is `margin` with sub properties like `margin-top`, `margin-right`, etc.
+console.log(property.getValues());
+// { 'margin-top': '10px', 'margin-right': '20px', ... };
+```
+
+Returns **[Object][2]** 
+
+### getSeparator
+
+Get property separator.
+
+Returns **[RegExp][5]** 
+
+### getJoin
+
+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
+
+[3]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
+
+[4]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
+
+[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/RegExp
+
+[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
+
+[7]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number

docs/api/property_select.md

@@ -20,7 +20,7 @@ Get current selected option or by id.
 
 #### Parameters
 
-*   `id` **[String][3]** Option id.
+*   `id` **[String][3]?** Option id.
 
 Returns **([Object][2] | null)** 
 

src/style_manager/model/PropertyComposite.js

@@ -14,8 +14,6 @@ import Property from './Property';
  *  }
  * `
  * @property {Function} [toStyle] Custom logic for creating the CSS style object to apply on selected targets.
- *
- * [Property]: property.html
  */
 export default class PropertyComposite extends Property {
   defaults() {
@@ -41,7 +39,7 @@ export default class PropertyComposite extends Property {
   /**
    * Get property by id.
    * @param  {String} id Property id.
-   * @returns {[Property]|null>}
+   * @returns {[Property]|null}
    */
   getProperty(id) {
     return this.get('properties').filter(prop => prop.get('id') === id)[0] || null;
@@ -65,10 +63,14 @@ export default class PropertyComposite extends Property {
   }
 
   /**
-   * Get current values of properties
+   * Get current values of properties.
    * @param {Object} [opts={}] Options
-   * @param {Boolean} [opts.byName=false] Use property name as key instead of ID
+   * @param {Boolean} [opts.byName=false] Use property names as a key instead of the id.
    * @returns {Object}
+   * @example
+   * // In case the property is `margin` with sub properties like `margin-top`, `margin-right`, etc.
+   * console.log(property.getValues());
+   * // { 'margin-top': '10px', 'margin-right': '20px', ... };
    */
   getValues({ byName } = {}) {
     return this.getProperties().reduce((res, prop) => {
@@ -78,6 +80,22 @@ export default class PropertyComposite extends Property {
     }, {});
   }
 
+  /**
+   * Get property separator.
+   * @returns {RegExp}
+   */
+  getSeparator() {
+    return this.getSplitSeparator();
+  }
+
+  /**
+   * Get the join value.
+   * @returns {String}
+   */
+  getJoin() {
+    return this.__getJoin();
+  }
+
   getSplitSeparator() {
     return new RegExp(`${this.get('separator')}(?![^\\(]*\\))`);
   }
@@ -319,3 +337,6 @@ export default class PropertyComposite extends Property {
     return this.get('properties').getFullValue();
   }
 }
+/**
+ * [Property]: property.html
+ */