From 4873f1addb605981a09f3e07b35460025bbb8bf3 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Thu, 23 Dec 2021 17:11:00 +0100 Subject: [PATCH] Add PropertyComposite in docs --- docs/.vuepress/config.js | 1 + docs/api.js | 1 + docs/api/property_composite.md | 99 ++++++++++++++++++++ docs/api/property_select.md | 2 +- src/style_manager/model/PropertyComposite.js | 31 +++++- 5 files changed, 128 insertions(+), 6 deletions(-) create mode 100644 docs/api/property_composite.md diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 19ef6498e..829c5159f 100644 --- a/docs/.vuepress/config.js +++ b/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`], diff --git a/docs/api.js b/docs/api.js index d3c0698ed..6f2b71d56 100644 --- a/docs/api.js +++ b/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'], diff --git a/docs/api/property_composite.md b/docs/api/property_composite.md new file mode 100644 index 000000000..c2106f714 --- /dev/null +++ b/docs/api/property_composite.md @@ -0,0 +1,99 @@ + + +## 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 diff --git a/docs/api/property_select.md b/docs/api/property_select.md index 750a78f22..c1a707b54 100644 --- a/docs/api/property_select.md +++ b/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)** diff --git a/src/style_manager/model/PropertyComposite.js b/src/style_manager/model/PropertyComposite.js index d9015cd95..204a46f86 100644 --- a/src/style_manager/model/PropertyComposite.js +++ b/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 + */