@things-factory/component-ui - npm Package Compare versions

Comparing version 0.0.17 to 0.0.18

component/form/form-master.js

 import { LitElement, html, css } from 'lit-element'
+import * as FormSerialize from 'form-serialize'
 
 class FormMaster extends LitElement {
   static get styles() {
-    return css``
+    return css`
+      form {
+        padding: 30px;
+      }
+      input {
+        border: solid 1px #32526a;
+        width: 100%;
+        padding-bottom: 10px;
+      }
+
+      ::placeholder {
+        font-size: 0.8rem;
+      }
+    `
   }
@@ -13,48 +27,17 @@ static get properties() {
 
-  constructor() {
-    super()
-    this.input = [
-      {
-        name: 'name',
-        type: 'text',
-        required: true,
-        length: 10
-      },
-      {
-        name: 'email',
-        type: 'email',
-        required: true
-      },
-      {
-        name: 'password',
-        type: 'password',
-        readonly: true
-      },
-      {
-        name: 'age',
-        type: 'number',
-        min: 1,
-        max: 100
-      },
-      {
-        name: 'phone number',
-        type: 'number'
-      },
-      {
-        name: 'address',
-        type: 'text'
-      },
-      {
-        name: 'url',
-        type: 'url',
-        disabled: true
-      }
-    ]
-  }
-
   render() {
     return html`
-      <form>
-        ${this.input.map(i => {
-          html`
+      <form
+        @submit="${e => {
+          this.dispatchEvent(
+            new CustomEvent('submit', {
+              detail: {
+                data: this.serialize()
+              }
+            })
+          )
+        }}"
+      >
+        ${(this.input || []).map(i => {
+          return html`
             <input
@@ -76,4 +59,15 @@ name="${i.name}"
   }
+
+  checkValidity() {
+    const form = document.querySelector('form')
+    return form.checkValidity()
+  }
+
+  serialize() {
+    //transform data into json
+    const form = document.querySelector('form')
+    return (data = FormSerialize(form))
+  }
 }
 
 window.customElements.define('form-master', FormMaster)

package.json

 {
   "name": "@things-factory/component-ui",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "main": "index.js",
@@ -9,2 +9,3 @@ "license": "MIT",
   "dependencies": {
+    "form-serialize": "*",
     "lit-element": "^2.1.0"
@@ -11,0 +12,0 @@ },

New alerts

Wildcard dependency

Quality

Package has a dependency with a floating version range. This can cause issues if the dependency publishes a new major version.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

30880

increased by0.39%

Worsened metrics

Dependency count

2

increased by100%

Lines of code

684

decreased by-1.16%

Number of medium quality alerts

2

increased by100%

Dependency changes

• + Addedform-serialize@*

• + Addedform-serialize@0.7.2(transitive)