@dreamworld/dw-form - npm Package Compare versions

Comparing version 0.1.0 to 1.0.1

dw-form-element.js

@@ -34,3 +34,2 @@ /**
     let event = new CustomEvent('unregister-dw-form-element', {
-      detail: this,
       bubbles: true,
@@ -49,3 +48,3 @@ composed: true
     this.addEventListener('register-dw-form-element', (e) => { 
-      if (e.path[0] !== this) { 
+      if (e.composedPath()[0] !== this) { 
         e.stopPropagation();
@@ -62,3 +61,2 @@ return;
     let event = new CustomEvent('register-dw-form-element', { 
-      detail: this,
       bubbles: true, 
@@ -65,0 +63,0 @@ composed: true

dw-form-field.js

@@ -20,8 +20,4 @@ /**
         :host {
-          --mdc-theme-primary: var(--primary-color);
-          --mdc-theme-secondary: var(--accent-color);
-          --mdc-theme-on-primary: var(--primary-text-color);
-          --mdc-theme-on-secondary: var(--secondary-text-color);
-          --mdc-theme-text-primary-on-background: var(--primary-text-color);
           display: block;
+          --mdc-theme-text-primary-on-background: var(--mdc-theme-text-primary);
         }
@@ -34,3 +30,3 @@
         :host([disabled]) .mdc-form-field {
-          color: var(--disabled-text-color, rgba(0,0,0,0.38));
+          color: var(--mdc-theme-disabled-text-color, rgba(0,0,0,0.38));
         }
@@ -37,0 +33,0 @@

dw-form.js

@@ -18,3 +18,3 @@ /**
         :host {
-          display: inline-block;
+          display: block;
           outline:none;
@@ -30,12 +30,2 @@ }
 
-  static get properties() {
-    return {
-
-      /* List of registered elements */
-      _customElements: {
-        type: Array
-      }
-    }
-  }
-
   render() {
@@ -50,2 +40,3 @@ return html`
     this._customElements = [];
+    this._onUnregister = this._onUnregister.bind(this);
   }
@@ -59,4 +50,3 @@
     super.connectedCallback();
-    this.addEventListener('register-dw-form-element', this._registerEventHandler);
-    this._listenUnregisterEvent();
+    this.addEventListener('register-dw-form-element', this._onRegister);
   }
@@ -70,5 +60,7 @@
     super.disconnectedCallback();
+    this.removeEventListener('register-dw-form-element', this._onRegister);
+    this._customElements.forEach((el) => {
+      el.removeEventListener('unregister-dw-form-element', this._onUnregister);
+    });
     this._customElements = [];
-    this.removeEventListener('register-dw-form-element', this._registerEventHandler);
-    this.removeEventListener('unregister-dw-form-element', this._unregisterEventHandler);
   }
@@ -140,12 +132,7 @@
   /**
+   * @param {HTMLElement} - registered element
    * Binds `unregister-dw-form-element` event listeners
-   * Here, binding listener on light dom as event is not propagating to parent when
-   * it's triggers from light dom's `disconnectedCallback`
    */
-  _listenUnregisterEvent() { 
-    let elements = this.querySelectorAll('*');
-
-    elements.forEach((el) => {
-      el.addEventListener('unregister-dw-form-element', this._unregisterEventHandler.bind(this));
-    });
+  _listenUnregisterEvent(el) { 
+    el.addEventListener('unregister-dw-form-element', this._onUnregister);
   }
@@ -157,4 +144,5 @@
    */
-  _registerEventHandler(e) { 
-    this._customElements.push(e.detail);
+  _onRegister(e) { 
+    this._customElements.push(e.composedPath()[0]);
+    this._listenUnregisterEvent(e.composedPath()[0]);
   }
@@ -166,4 +154,4 @@
    */
-  _unregisterEventHandler(e) { 
-    let index = this._customElements.indexOf(e.detail);
+  _onUnregister(e) { 
+    let index = this._customElements.indexOf(e.composedPath()[0]);
 
@@ -170,0 +158,0 @@ if (index > -1) {

package.json

 {
   "name": "@dreamworld/dw-form",
-  "version": "0.1.0",
+  "version": "1.0.1",
   "description": "",
-  "main": "index.js",
+  "main": "dw-form.js",
   "scripts": {
@@ -28,5 +28,7 @@ "test": "echo \"Error: no test specified\" && exit 1"
   "devDependencies": {
-    "@dreamworld/dw-checkbox": "1.0.0",
-    "@dreamworld/dw-input": "1.0.0"
+    "semantic-release": "beta"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }

README.md

@@ -8,3 +8,3 @@ # dw-form
 ```html
-  npm install --save @dw/dw-form
+  npm install --save @dreamworld/dw-form
 ```
@@ -15,3 +15,3 @@
 ```html
-  @import `@dw/dw-form/dw-form`;
+  @import `@dreamworld/dw-form/dw-form`;
 ```
@@ -23,8 +23,7 @@
 
-- serialized
-  - Use to get key/value data of it's child elements
+- `serialize()` Used to get key/value data of it's children form elements as JSON Object.
+- `validate()` Used to validate child elements
+  - Invokes `validate()` method on each form element if it's defined/available.
+  - Returns `true` if all elements `validate` has returned `true`.
 
-- validate
-  - Use to validate child elements
-
 ## Example
@@ -42,3 +41,3 @@
 
-A parent element of custom form element.
+A Mixin used to create custom form element.
 
@@ -57,7 +56,10 @@ ## Installation
 
-## Features
+## How it works?
 
-- Triggers `register-dw-form-element` on attach used by `dw-form`
-- Triggers `unregister-dw-form-element` on attach used by `dw-form`
-- Stops `register-dw-form-element`'s propagation of it's child element
+- Triggers `register-dw-form-element` when attached (from `connectedCallback`). `dw-form` uses this event to register
+ this element as custom form element.
+- Triggers `unregister-dw-form-element` when detached (from `disconnectedCallback`). `dw-form` on this event removes
+this element from the custom elements registry it has.
+- Stops propagation of `register-dw-form-element` event from child elements (from local dom or light dom). It allows to
+create composite form elements. Only most souter form element is registered with `dw-form`.
 
@@ -72,6 +74,12 @@ ## Example
 
+** NOTE: Do not forget to call `super.connectedCallback()` and `super.disconnectedCallback()` in your element **
+
 # dw-form-field
 
-It's a wrapper of `mwc-formfield` which aligns form-field with it's label. It also activates a ripple effect upon interacting with the label. For more detail visit https://github.com/material-components/material-components-web-components/tree/master/packages/formfield.
+It's a wrapper of `mwc-formfield` which aligns form-field with it's label. 
+It also activates a ripple effect upon interacting with the label. For more detail visit
+ https://github.com/material-components/material-components-web-components/tree/master/packages/formfield.
 
+It's used to show label for checkbox & radio buttons. Used by `dw-checkbox` and `dw-radio-button2`.
+
 ## Installation
@@ -84,6 +92,13 @@ ```html
 
-```html
+```js
   @import '@dw/dw-form-field'
 ```
 
+
+```html
+<dw-form-field label="Name" disabled>
+  <my-form-element></my-form-element>
+</dw-form-field>
+```
+
 ## [Demo](https://dreamworldsolutions.github.io/dw-form-field/demo/index.html)
@@ -93,7 +108,7 @@
 
-- Add `disabled` property
-  - When set to true, text will be rendered in `--disabled-text-color`
+- Adds `disabled` property
+  - When set to `true`, text will be rendered in `--disabled-text-color`
   - Deactivates ripple on click
-- Remove left padding from label When label is not available
-- Add a way to change font style. By default it inherits font style from parent element
+- Removes left padding from label When label is not available
+- Adds a way to change font style. By default it inherits font style from parent element
 
@@ -103,5 +118,3 @@ ## Properties
 - label
-
 - alignEnd
-
 - disabled
@@ -118,3 +131,3 @@
 ```
-dw-form-field{
+dw-form-field {
   --primary-text-color: blue;
@@ -124,9 +137,1 @@ font-size: 18px;
 ```
-
-## Example
-
-```html
-<dw-form-field label="Name" disabled>
-  <dw-checkbox disabled></dw-checkbox>
-</dw-form-field>
-```

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

1

decreased by-50%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

127

increased by4.96%

Worsened metrics

Total package byte prevSize

13132

decreased by-23.25%

Number of package files

8

decreased by-11.11%

Lines of code

263

decreased by-34.09%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes