@dile/ui - npm Package Compare versions

Comparing version 2.3.1 to 2.4.0

components/checkbox/src/DileCheckbox.js

@@ -14,2 +14,6 @@ import { html, css, LitElement } from "lit";
 
+  static get formAssociated() {
+    return true;
+  }
+
   constructor() {
@@ -19,2 +23,3 @@ super();
     this.name = '';
+    this.internals = this.attachInternals();
   }
@@ -90,2 +95,3 @@
       this.emmitChange();
+      this.internals.setFormValue(this.checked ? 'true' : null);
     }
@@ -92,0 +98,0 @@ }

components/drop-file/src/DileDropFile.js

@@ -67,5 +67,10 @@ import { LitElement, html, css } from 'lit';
       allowedExtensions: { type: Array },
-      extensionErrorMessage: { type: String},
+      extensionErrorMessage: { type: String },
+      name: { type: String },
     };
   }
+
+  static get formAssociated() {
+    return true;
+  }
   
@@ -82,2 +87,3 @@ constructor() {
     this.allowedExtensions = [];
+    this.internals = this.attachInternals();
   } 
@@ -166,2 +172,3 @@
   _processFile(files) {
+    this.internals.setFormValue(files.length > 0 ? files[0] : null);
     if (files.length > 0) {
@@ -212,2 +219,3 @@ this.fileName = files[0].name;
     this.fileName = "";
+    this.internals.setFormValue(null);
     this.emmitChange();
@@ -214,0 +222,0 @@ }

components/input/src/DileInput.js

@@ -65,14 +65,6 @@ import { LitElement, html, css } from 'lit';
 
-    firstUpdated() {
-      if(this.focusOnStart) {
-        this.focus();
-      }
+    static get formAssociated() {
+      return true;
     }
 
-    updated(changedProperties) {
-      if(changedProperties.has('value')) {
-        this.emmitChange();
-      }
-    }
-
     constructor() {
@@ -89,4 +81,18 @@ super();
         this.types = ['text', 'password', 'email', 'number', 'tel', 'url', 'search', 'date', 'time', 'datetime', 'datetime-local', 'month', 'week'];     
+        this.internals = this.attachInternals();
     }
 
+    firstUpdated() {
+      if(this.focusOnStart) {
+        this.focus();
+      }
+    }
+
+    updated(changedProperties) {
+      if(changedProperties.has('value')) {
+        this.emmitChange();
+        this.internals.setFormValue(this.value);
+      }
+    }
+
     static get styles() {
@@ -93,0 +99,0 @@ return [

components/input/src/DileInputInteger.js

@@ -41,2 +41,3 @@ import { LitElement, html, css } from 'lit';
     updated(changedProperties) { 
+        super.updated(changedProperties);
         if(changedProperties.has('value') && this.value) {
@@ -43,0 +44,0 @@ this.changed = true;

components/input/src/DileInputMoney.js

@@ -60,2 +60,3 @@ import { LitElement, html, css } from 'lit';
     updated(changedProperties) { 
+        super.updated(changedProperties);
         if(changedProperties.has('value') && this.value) {
@@ -62,0 +63,0 @@ this.changed = true;

components/input/src/DileInputNumberMask.js

@@ -31,2 +31,3 @@ import { LitElement, html } from 'lit';
   updated(changedProperties) {
+    super.updated(changedProperties);
     if (changedProperties.has('mask')) {
@@ -33,0 +34,0 @@ this.maskController.setPattern(this.mask);

components/input/src/DileInputPercentage.js

@@ -49,2 +49,3 @@ import { LitElement, html, css } from 'lit';
     updated(changedProperties) { 
+        super.updated(changedProperties);
         if(changedProperties.has('value') && this.value) {
@@ -51,0 +52,0 @@ this.changed = true;

components/radio-group/src/DileRadioGroup.js

 import { LitElement, html, css } from 'lit';
 import { DileEmmitChange } from '../../../mixins/form/index.js';
+import '../radio.js';
 
@@ -24,2 +25,6 @@ export class DileRadioGroup extends DileEmmitChange(LitElement) {
 
+  static get formAssociated() {
+    return true;
+  }
+
   static get properties() {
@@ -41,2 +46,3 @@ return {
     this.disabled = false;
+    this.internals = this.attachInternals();
   }
@@ -49,2 +55,3 @@
       this.dispatchChangeEvent();
+      this.internals.setFormValue(this.value);
     }
@@ -51,0 +58,0 @@ }

components/range/src/DileRange.js

 import { LitElement, html, css } from 'lit';
 import { DileEmmitChange } from '../../../mixins/form/index.js';
+import '../../input/input-message.js';
 
@@ -10,4 +11,17 @@ export class DileRange extends DileEmmitChange(LitElement) {
         display: block;
+        margin-bottom: 10px;
       }
 
+      :host([errored]) {
+        --dile-range-line-color: var(--dile-range-line-errored-color, #c00);
+      }
+
+      label {
+        display: block;
+        margin-bottom: var(--dile-input-label-margin-bottom, 4px);
+        font-size: var(--dile-input-label-font-size, 1em);
+        color: var(--dile-input-label-color, #59e);
+        font-weight: var(--dile-input-label-font-weight, normal);
+      }
+
       /*********** Baseline, reset styles ***********/
@@ -28,6 +42,8 @@ input[type="range"] {
 
+      
+
       /******** Chrome, Safari, Opera and Edge Chromium styles ********/
       /* slider track */
       input[type="range"]::-webkit-slider-runnable-track {
-        background-color: var(--dile-range-line-color, #7BB93D);
+        background-color: var(--dile-range-line-color, var(--dile-primary-color, #7BB93D));
         border-radius: 0.5rem;
@@ -56,3 +72,3 @@ height: var(--dile-range-line-height, 0.5rem);
       input[type="range"]::-moz-range-track {
-        background-color: var(--dile-range-line-color, #7BB93D);
+        background-color: var(--dile-range-line-color, var(--dile-primary-color, #7BB93D));
         border-radius: 0.5rem;
@@ -75,5 +91,11 @@ height: var(--dile-range-line-height, 0.5rem);
       }
+
+
     `;
   }
 
+  static get formAssociated() {
+    return true;
+  }
+
   static get properties() {
@@ -86,2 +108,6 @@ return {
       name: { type: String },
+      label: { type: String },
+      message: { type: String },
+      errored: { type: Boolean, reflect: true },
+      hideErrorOnInput: { type: Boolean },
     };
@@ -97,2 +123,4 @@ }
     this.value = 1;
+    this.message = ""
+    this.internals = this.attachInternals();
   }
@@ -102,5 +130,9 @@
     return html`
+      ${this.label
+          ? html`<label for="inputrange">${this.label}</label>`
+          : ""
+      }
       <input 
         type="range" 
-        id="${this.name}" 
+        id="inputrange" 
         name="${this.name}" 
@@ -113,2 +145,3 @@ min="${this.min}"
       >
+      <dile-input-message ?errored="${this.errored}" message="${this.message}"></dile-input-message>
     `;
@@ -119,2 +152,5 @@ }
     this.value = e.target.value;
+    if (this.hideErrorOnInput && this.errored) {
+      this.clearError();  
+    }
   }
@@ -125,5 +161,11 @@
       this.emmitChange();
+      this.internals.setFormValue(this.value);
     }
   }
   
+  clearError() {
+    this.errored = false;
+    this.message = '';
+  }
+  
 }

components/select/src/DileSelect.js

@@ -59,2 +59,6 @@ import { html, css, LitElement } from "lit";
 
+  static get formAssociated() {
+    return true;
+  }
+
   static get properties() {
@@ -99,2 +103,3 @@ return {
     this.quiet = false;
+    this.internals = this.attachInternals();
   }
@@ -136,2 +141,3 @@
       }
+      this.internals.setFormValue(this.value);
     }
@@ -138,0 +144,0 @@ if(changedProperties.has("disabled")) {

components/select/src/DileSelectAjax.js

@@ -60,2 +60,6 @@ import { LitElement, html, css } from 'lit';
 
+  static get formAssociated() {
+    return true;
+  }
+
   static get properties() {
@@ -113,2 +117,3 @@ return {
       this.emmitChange();
+      this.internals.setFormValue(this.value);
     }
@@ -134,2 +139,3 @@ }
     this.idProperty = 'id';
+    this.internals = this.attachInternals();
   }
@@ -165,4 +171,3 @@
   registerText(json) {
-    console.log('json', json);
-    this.selectedText = json[this.displayProperty]; 
+    this.selectedText = json[this.resultDataProperty][this.displayProperty]; 
     this.loading = false;
@@ -169,0 +174,0 @@ }

components/textarea/src/DileTextarea.js

 import { LitElement, html, css } from 'lit';
 import { messageStyles } from '../../input/index.js';
+import { DileEmmitChange } from '../../../mixins/form/index.js';
 
-export class DileTextarea extends LitElement {
+export class DileTextarea extends DileEmmitChange(LitElement) {
 
@@ -53,2 +54,6 @@ static get styles() {
 
+  static get formAssociated() {
+    return true;
+  }
+
   static get properties() {
@@ -84,2 +89,3 @@ return {
     this._maxHeight = 100;
+    this.internals = this.attachInternals();
   }
@@ -101,2 +107,6 @@
     }
+    if(changedProperties.has("value")) {
+      this.emmitChange();
+      this.internals.setFormValue(this.value);
+    }
   }
@@ -103,0 +113,0 @@

package.json

 {
   "name": "@dile/ui",
-  "version": "2.3.1",
+  "version": "2.4.0",
   "description": "UI Core components from dile-components.",
@@ -29,3 +29,3 @@ "main": "index.js",
   },
-  "gitHead": "80e68858b65ac111ffba6ed72eee05df0a0aeb94"
+  "gitHead": "9514bd93f87c3237a41056fb6bb59025088f230e"
 }

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

227899

increased by1.2%

Lines of code

7267

increased by1.1%

No dependency changes