sling-web-component-form - npm Package Compare versions

Comparing version 0.17.0 to 1.6.0

package.json

 {
   "name": "sling-web-component-form",
-  "version": "0.17.0",
-  "description": "",
-  "main": "dist/cjs/index.js",
-  "jsnext:main": "dist/es/index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
+  "version": "1.6.0",
+  "description": "Sling Form",
+  "module": "src/index.js",
+  "main": "dist/cjs/es5/index.js",
+  "jsnext:main": "dist/es/es6/index.js",
+  "browser": "dist/iife/es6/index.js",
   "author": "Stone Pagamentos",
   "dependencies": {
-    "sling-web-component-button": "^0.17.0",
-    "sling-web-component-input": "^0.17.0",
-    "sling-web-framework": "^0.17.0",
-    "sling-web-helpers": "^0.17.0"
+    "sling-framework": "^1.6.0",
+    "sling-helpers": "^1.6.0",
+    "sling-web-component-button": "^1.6.0",
+    "sling-web-component-input": "^1.6.0"
   }
 }

README.md

@@ -1,3 +0,61 @@
-# sling-web-component-card
+# sling-web-component-form
 
-The card Component. To use it just add the tag to your index.html.
+## Install
+
+```
+npm instal sling-web-component-form
+```
+
+## Tag
+
+```HTML
+  <sling-form></sling-form>
+```
+
+## Dependencies
+
+### Required
+
+* **sling-framework**
+* **sling-helpers**
+
+### Recommended
+
+* **sling-web-component-button**
+* **sling-web-component-input**
+
+## Attributes and properties
+
+|Name|Type|Default Values|ReflectToAttribute|Observer|callSdk|
+|:--|:--|:--|:--:|:--|:--:|
+|formdata|Object|**false**|:x:|:heavy_check_mark:|
+|validation|Array|**[]**|:x:|:x:|
+
+### Description
+
+|Name|Description|
+|:---|:---|
+|formdata|Object that contains the data from the form|
+|validation|A list of `sling-helper` methods for validations|
+
+## Events  
+* **formsubmit**
+**Description:** Event triggered every time that the form is submitted.     
+
+* **formupdate**
+**Description:** Event triggered when any value of the form is changed.     
+
+### Use
+
+Use it like you are using a `<form>` tag. You can put anything form-related inside of it.
+      
+ ```HTML      
+<sling-form>
+  <sling-input name="name" type="text" label="Name"></sling-input>
+  <!-- ... -->
+</sling-form>      
+```      
+
+## Examples            
+All component examples can be emulated using the `npm start sling-web-component-form` command.
+      

src/component/Form.js

@@ -1,5 +0,5 @@
-import { html, SlingElement } from '../../node_modules/sling-web-framework/src/index.js';
+import { html, SlingElement } from 'sling-framework';
 
 const isFormField = target =>
-  target.nodeName === 'SLING-INPUT' || target.nodeName === 'SLING-SELECT';
+  ['SLING-INPUT', 'SLING-SELECT', 'INPUT', 'SELECT'].includes(target.nodeName);
 
@@ -45,6 +45,2 @@ const getFieldId = target => target.getAttribute('name') ||
       },
-      open: {
-        type: Boolean,
-        reflectToAttribute: true,
-      },
     };
@@ -56,5 +52,6 @@ }
     this.initForm();
-    this.addEventListener('update', this.handleUpdate);
-    this.addEventListener('click', this.handleClick);
-    this.addEventListener('fieldblur', this.handleBlur);
+
+    this.addEventListener('input', this.handleUpdate);
+    this.addEventListener('click', this.handleClick, true);
+    this.addEventListener('blur', this.handleBlur, true);
   }
@@ -64,5 +61,5 @@
     super.disconnectedCallback();
-    this.removeEventListener('update', this.handleUpdate);
-    this.removeEventListener('click', this.handleClick);
-    this.removeEventListener('fieldblur', this.handleBlur);
+    this.removeEventListener('input', this.handleUpdate);
+    this.removeEventListener('click', this.handleClick, true);
+    this.removeEventListener('blur', this.handleBlur, true);
   }
@@ -153,7 +150,16 @@
       <style>
-        @import url('../sling-web-component-form/src/index.css');
+        :host {
+  display: grid;
+}
+
+/* for compatibility */
+
+sling-form {
+  display: grid;
+}
+
       </style>
-      <slot></slot>
+      <slot id="inside"></slot>
     `;
   }
 }

src/component/Form.test.js

@@ -1,4 +0,40 @@
-/* eslint-disable */
+import { registerComponent } from 'sling-helpers';
 import { Form } from './Form.js';
 
-// TODO Write me!
+registerComponent('sling-form', Form);
+
+let formElement;
+
+let inputWithName;
+
+describe('Form', () => {
+  beforeEach(() => {
+    formElement = document.createElement('sling-form');
+    document.body.appendChild(formElement);
+  });
+
+  afterEach(() => {
+    if (formElement != null) {
+      document.body.removeChild(formElement);
+      formElement = undefined;
+    }
+  });
+
+  it('Should create the element', () => {
+    expect(formElement).not.to.equal(undefined);
+  });
+
+  it('All elements inside a Form shoud have a name or an id', () => {
+    expect(formElement.formdata).not.to.equal(null);
+  });
+
+  it('Form should render elements whitout errors', () => {
+    expect(() => {
+      inputWithName = document.createElement('input');
+      inputWithName.type = 'text';
+      inputWithName.name = 'anyName';
+
+      formElement.appendChild(inputWithName);
+    }).to.not.throw();
+  });
+});

src/index.js

@@ -0,4 +1,4 @@
+import { registerComponent } from 'sling-helpers';
 import { Form } from './component/Form.js';
-import { domHelper } from '../node_modules/sling-web-helpers/src/index.js';
 
-domHelper.registerComponent('sling-form', Form);
+registerComponent('sling-form', Form);

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

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

Total package byte prevSize

504004

increased by2402.88%

Number of package files

21

increased by40%

Lines of code

12463

increased by2512.79%

Number of low quality alerts

1

decreased by-66.67%

Number of lines in readme file

61

increased by1425%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedsling-framework@^1.6.0

• + Addedsling-helpers@^1.6.0

• + Addedimask@4.1.5(transitive)

• + Addedis-plain-object@2.0.4(transitive)

• + Addedisobject@3.0.1(transitive)

• + Addedmoment@2.30.1(transitive)

• + Addedsling-framework@1.12.5(transitive)

• + Addedsling-helpers@1.12.5(transitive)

• + Addedsling-web-component-button@1.12.5(transitive)

• + Addedsling-web-component-input@1.12.5(transitive)

• + Addedtimm@1.7.1(transitive)

• - Removedsling-web-framework@^0.17.0

• - Removedsling-web-helpers@^0.17.0

• - Removed@babel/runtime@7.26.7(transitive)

• - Removedimask@3.4.0(transitive)

• - Removedredux@4.2.1(transitive)

• - Removedredux-thunk@2.4.2(transitive)

• - Removedregenerator-runtime@0.14.1(transitive)

• - Removedsling-web-component-button@0.17.0(transitive)

• - Removedsling-web-component-input@0.17.0(transitive)

• - Removedsling-web-component-sdk-connect@0.17.0(transitive)

• - Removedsling-web-framework@0.17.0(transitive)

• - Removedsling-web-helpers@0.17.0(transitive)

• - Removedsling-web-sdk@0.17.0(transitive)

• - Removedsling-web-storage@0.17.0(transitive)

• Updatedsling-web-component-button@^1.6.0

• Updatedsling-web-component-input@^1.6.0