svelte-formula - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

CHANGELOG.md

@@ -8,2 +8,13 @@ # Changelog
 
+## [0.3.0] 2021-02-15
+
+### Added
+
+- Support for `range`, `color`, `date`, `time`, `week` inputs
+- Support for `file` input
+
+### Changed
+
+- `number` input type returns a number value, or `undefined` if not set
+
 ## [0.2.0] 2021-02-15
@@ -17,6 +28,8 @@
 
-- Support for custom field-level validators via the `validators` property of the `formula` options. Validators are provided as an
-  object - the key is the `name` of the fields, and the value is another object containing the validators. Each
-  validator is has a key that is the name of the validation and a function that returns a string if the validation fails or
-  `null` if it passes. The string message is used to display the message, the key is added to the `errors` object in `validity`
+- Support for custom field-level validators via the `validators` property of the `formula` options. Validators are
+  provided as an object - the key is the `name` of the fields, and the value is another object containing the
+  validators. Each validator is has a key that is the name of the validation and a function that returns a string if the
+  validation fails or
+  `null` if it passes. The string message is used to display the message, the key is added to the `errors` object
+  in `validity`
 
@@ -51,4 +64,5 @@ ```sveltehtml
 
-- Support for custom form-level validators via the `formValidators` property of the `formula` options. Validators are provided as an
-  object - Each validator has a key that is the name of the validation, and a function that returns a string if the validation fails or
+- Support for custom form-level validators via the `formValidators` property of the `formula` options. Validators are
+  provided as an object - Each validator has a key that is the name of the validation, and a function that returns a
+  string if the validation fails or
   `null` if it passes. The error message are available via the `formValidity` store.
@@ -68,3 +82,3 @@
   <input type='password' name='passwordMatch' required minlength='8'>
-  <div hidden="{!$submitValidity?.passwordsMatch}">{$submitValidity?.passwordsMatch}</div>
+  <div hidden='{!$submitValidity?.passwordsMatch}'>{$submitValidity?.passwordsMatch}</div>
   ```
@@ -71,0 +85,0 @@

lib/event.d.ts

@@ -38,2 +38,3 @@ import { Writable } from 'svelte/store';
 export declare function createSelectHandler(values: Writable<Record<string, unknown>>, errors: Writable<FormErrors>, isValid: Writable<boolean>, customValidators?: ValidationRules): (event: KeyboardEvent | MouseEvent) => void;
+export declare function createFileHandler(values: Writable<Record<string, unknown>>, errors: Writable<FormErrors>, isValid: Writable<boolean>, customValidators?: ValidationRules): (event: KeyboardEvent | MouseEvent) => void;
 /**
@@ -40,0 +41,0 @@ * Create a handler for a form element submission, when called it copies the contents

lib/extract.d.ts

@@ -34,1 +34,7 @@ import { ExtractedFormInfo, FormEl } from '../types/forms';
 export declare function extractSelect(el: HTMLSelectElement, customValidators?: ValidationRules): ExtractedFormInfo;
+/**
+ * Extract data from the files
+ * @param el
+ * @param customValidators
+ */
+export declare function extractFile(el: HTMLInputElement, customValidators?: ValidationRules): ExtractedFormInfo;

package.json

 {
   "name": "svelte-formula",
   "description": "Reactive Forms for Svelte",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "keywords": [
@@ -6,0 +6,0 @@ "svelte",

README.md

@@ -189,3 +189,3 @@ # Svelte Formula
   - [x] Support multiple named fields with unique `id` attributes, with an array of results sorted by ID alphabetically
-  - [ ] Return correct value type for fields (return number as Number value)
+  - [x] Return correct value type for fields (return number as Number value)
 - [x] Support Select Fields
@@ -196,6 +196,6 @@ - [x] Support Multiple Select Fields
   - [x] Support Multiple Checkbox Fields
-- [ ] Support the Range input
-- [ ] Support the Color input
-- [ ] Support the Date / Time / DateTime inputs
-- [ ] Support the File input
+- [x] Support the Range input
+- [x] Support the Color input
+- [x] Support the Date / Time inputs
+- [x] Support the File input
 
@@ -202,0 +202,0 @@ ### Validation

svelte-formula.esm.js

@@ -195,3 +195,11 @@ import { writable } from 'svelte/store';
   var name = el.getAttribute('name');
-  var value = updateMultiple ? updateMultiple(el.id, el.value) : el.value;
+  var val;
+
+  if (['number', 'range'].includes(el.getAttribute('type'))) {
+    val = el.value === '' ? undefined : parseInt(el.value);
+  } else {
+    val = el.value;
+  }
+
+  var value = updateMultiple ? updateMultiple(el.id, val) : val;
   var validity = checkValidity(el, value, customValidators);
@@ -270,3 +278,18 @@ return __assign({
 }
+/**
+ * Extract data from the files
+ * @param el
+ * @param customValidators
+ */
 
+function extractFile(el, customValidators) {
+  var name = el.getAttribute('name');
+  var value = el.files;
+  var validity = checkValidity(el, value, customValidators);
+  return __assign({
+    name: name,
+    value: value
+  }, validity);
+}
+
 /**
@@ -365,2 +388,9 @@ * Update the value and error stores, also update form validity
 }
+function createFileHandler(values, errors, isValid, customValidators) {
+  return function (event) {
+    var el = event.currentTarget || event.target;
+    var details = extractFile(el, customValidators);
+    valueUpdate(details, values, errors, isValid);
+  };
+}
 /**
@@ -644,2 +674,6 @@ * Create a handler for a form element submission, when called it copies the contents
         changeHandlers.set(el, handler);
+      } else if (el.type === 'file') {
+        var handler = createFileHandler(formValues, validity, isFormValid, customValidations);
+        el.addEventListener('change', handler);
+        changeHandlers.set(el, handler);
       } else {
@@ -654,4 +688,10 @@ var isMultiple = hasMultipleNames(name, formElements);
         var handler = createValueHandler(formValues, validity, isFormValid, updateMultiple, customValidations);
-        el.addEventListener('keyup', handler);
-        keyupHandlers.set(el, handler);
+
+        if (['range', 'color', 'date', 'time', 'week'].includes(el.type)) {
+          el.addEventListener('change', handler);
+          changeHandlers.set(el, handler);
+        } else {
+          el.addEventListener('keyup', handler);
+          keyupHandlers.set(el, handler);
+        }
       }
@@ -658,0 +698,0 @@ });

svelte-formula.umd.js

@@ -199,3 +199,11 @@ (function (global, factory) {
       var name = el.getAttribute('name');
-      var value = updateMultiple ? updateMultiple(el.id, el.value) : el.value;
+      var val;
+
+      if (['number', 'range'].includes(el.getAttribute('type'))) {
+        val = el.value === '' ? undefined : parseInt(el.value);
+      } else {
+        val = el.value;
+      }
+
+      var value = updateMultiple ? updateMultiple(el.id, val) : val;
       var validity = checkValidity(el, value, customValidators);
@@ -274,3 +282,18 @@ return __assign({
     }
+    /**
+     * Extract data from the files
+     * @param el
+     * @param customValidators
+     */
 
+    function extractFile(el, customValidators) {
+      var name = el.getAttribute('name');
+      var value = el.files;
+      var validity = checkValidity(el, value, customValidators);
+      return __assign({
+        name: name,
+        value: value
+      }, validity);
+    }
+
     /**
@@ -369,2 +392,9 @@ * Update the value and error stores, also update form validity
     }
+    function createFileHandler(values, errors, isValid, customValidators) {
+      return function (event) {
+        var el = event.currentTarget || event.target;
+        var details = extractFile(el, customValidators);
+        valueUpdate(details, values, errors, isValid);
+      };
+    }
     /**
@@ -648,2 +678,6 @@ * Create a handler for a form element submission, when called it copies the contents
             changeHandlers.set(el, handler);
+          } else if (el.type === 'file') {
+            var handler = createFileHandler(formValues, validity, isFormValid, customValidations);
+            el.addEventListener('change', handler);
+            changeHandlers.set(el, handler);
           } else {
@@ -658,4 +692,10 @@ var isMultiple = hasMultipleNames(name, formElements);
             var handler = createValueHandler(formValues, validity, isFormValid, updateMultiple, customValidations);
-            el.addEventListener('keyup', handler);
-            keyupHandlers.set(el, handler);
+
+            if (['range', 'color', 'date', 'time', 'week'].includes(el.type)) {
+              el.addEventListener('change', handler);
+              changeHandlers.set(el, handler);
+            } else {
+              el.addEventListener('keyup', handler);
+              keyupHandlers.set(el, handler);
+            }
           }
@@ -662,0 +702,0 @@ });

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

100427

increased by3.2%

Lines of code

1733

increased by4.78%

No dependency changes