mofron-layout-margin - npm Package Compare versions

Comparing version 0.2.3 to 0.3.0

index.js

 /**
  * @file mofron-layout-margin/index.js
  * @brief margin layout of mofron
- * @author simpart
+ *        target child component is got margin style.
+ * @license MIT
  */
-const mf = require('mofron');
+const cmputl = mofron.util.component;
 
-mf.layout.Margin = class extends mf.Layout {
+module.exports = class extends mofron.class.Layout {
     /**
      * initialize margin layout
      *
-     * @param p1 (object) layout option
-     * @param p1 (string) margin type
-     * @param p2 (string) margin size value
+     * @param (mixed) ConfArg: type,value parameter
+     *                key-value: layout config
+     * @short type,value
+     * @type private
      */
-    constructor (po, p2) {
+    constructor (prm) {
         try {
             super();
             this.name('Margin');
-            this.prmMap(['type', 'value']);
-            this.prmOpt(po, p2);
+            this.shortForm('type', 'value');
+
+            /* init config */
+            this.confmng().add('type', { type: 'string', select: ['top', 'right', 'bottom', 'left'] });
+            this.confmng().add('value', { type: 'size', init: '0.25rem' });
+            
+	    /* set config */
+	    if (undefined !== prm) {
+                this.config(prm);
+	    }
         } catch (e) {
@@ -31,3 +41,3 @@ console.error(e.stack);
      *
-     * @note private method
+     * @type private
      */
@@ -39,3 +49,3 @@ contents (idx, tgt) {
             setmgn[mg] = this.value();
-            tgt.adom().style(setmgn);
+	    cmputl.rstyle(tgt, setmgn);
         } catch (e) {
@@ -48,15 +58,13 @@ console.error(e.stack);
     /**
-     * setter/getter margin type
+     * margin type setter/getter
      *
-     * @param p1 (string) margin type ('top', 'right', 'bottom', 'left')
-     * @param p1 (undefined) call as getter
+     * @param (string) margin type ('top', 'right', 'bottom', 'left')
+     *                 undefined: call as getter
      * @return (string) margin type
+     * @attention it's enable for all directions of margin if the type is null.
+     * @type parameter
      */
     type (prm) {
         try {
-            return this.member(
-                'type',
-                ['top', 'right', 'bottom', 'left'],
-                prm
-            );
+            return this.confmng('type', prm);
         } catch (e) {
@@ -69,16 +77,12 @@ console.error(e.stack);
     /**
-     * setter/getter margin size value
+     * margin size value setter/getter
      *
-     * @param (string) margin size (css value)
-     * @param (undefined) call as getter
-     * @return (string) margin size (css value)
+     * @param (string(size)) margin size
+     *                 undefined: call as getter
+     * @return (string(size)) margin size
+     * @type parameter
      */
     value (prm) {
         try {
-            return this.member(
-                'value',
-                'string',
-                (undefined !== prm) ? mf.func.getSize(prm).toString() : prm,
-                '0.25rem'
-            );
+            return this.confmng('value', prm);
         } catch (e) {
@@ -90,3 +94,2 @@ console.error(e.stack);
 }
-module.exports = mf.layout.Margin;
 /* end of file */

package.json

 {
   "name": "mofron-layout-margin",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "description": "margin layout of mofron",
@@ -14,3 +14,3 @@ "main": "index.js",
   "keywords": [
-    "front-end"
+    "mofron"
   ],
@@ -17,0 +17,0 @@ "author": "simpart",

README.md

 # mofron-layout-margin
-margin layout for [mofron](https://github.com/simpart/mofron).<br>
+[mofron](https://mofron.github.io/mofron/) is module based frontend framework.
 
+margin layout of mofron
+
+target child component is got margin style.
+
+
 # Install
-```bash
-mofron install mofron-layout-padding
 ```
+npm install mofron mofron-layout-margin
+```
 
 # Sample
-```javascript
-require('mofron');
-let Text    = require('mofron-comp-text');
-let Margin = require('mofron-layout-margin');
+```html
+<require>
+    <tag load="mofron-layout-text">Text<tag>
+    <tag load="mofron-layout-margin">Margin<tag>
+</require>
 
-new mofron.Component({
-    layout  : new Margin('left',100),   // margin layout
-    child   : [new Text('child 1'),
-               new Text('child 2'),
-               new Text('child 3')],
-    visible : true
-});
+<div layout=Margin:(left,0.5rem)>
+    <Text>Margin</Text>
+    <Text>Layout</Text>
+</div>
 ```
+
+# Parameter
+
+| Short<br>Form | Parameter Name | Type | Description |
+|:-------------:|:---------------|:-----|:------------|
+| ◯  | type | string | margin type ('top', 'right', 'bottom', 'left') |
+| | | | undefined: call as getter |
+| ◯  | value | string(size) | margin size |
+| | | | undefined: call as getter |
+

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4938

increased by15.94%

Number of package files

5

increased by25%

Lines of code

84

increased by1.2%

Number of lines in readme file

36

increased by56.52%

No dependency changes