svelte-formula - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

index.d.ts

@@ -12,4 +12,5 @@ /**
     submitValues: import("svelte/store").Writable<Record<string, string>>;
+    touched: import("svelte/store").Writable<Record<string, boolean>>;
     validity: import("svelte/store").Writable<Record<string, import("./types/forms").FormError>>;
     formValid: import("svelte/store").Writable<boolean>;
 };

lib/form.d.ts

 import { FormErrors, FormValues } from '../types/forms';
 import { Writable } from 'svelte/store';
-export declare function createForm(values: Writable<FormValues>, submit: Writable<FormValues>, errors: Writable<FormErrors>, isValid: Writable<boolean>): (node: HTMLElement) => {
+export declare function createForm(values: Writable<FormValues>, submit: Writable<FormValues>, errors: Writable<FormErrors>, isValid: Writable<boolean>, touched: Writable<Record<string, boolean>>): (node: HTMLElement) => {
     destroy: () => void;
 };

package.json

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

README.md

@@ -30,3 +30,3 @@ # Svelte Formula
 
-  const { form, formValues, submitValues, validity, formValid } = formula();
+  const { form, formValues, submitValues, validity, touched, formValid } = formula();
 
@@ -87,8 +87,13 @@ const valueSub = formValues.subscribe(values => console.log(values));
   API.
-  
+
 ### formValid
 
-A store that is a single `Boolean` value if the form is currently valid or not - this only emits when the form
-validity changes
+A store that is a single `Boolean` value if the form is currently valid or not - this only emits when the form validity
+changes
 
+### touched
+
+A store that updates when fields are marked as touched - contains an `Object` with key/value of `name` and `Boolean`,
+fields are added to the store as they are touched
+
 Icon made by [Eucalyp](https://creativemarket.com/eucalyp) from [flaticon.com](https://www.flaticon.com)

svelte-formula.esm.js

@@ -92,3 +92,20 @@ import { writable } from 'svelte/store';
 
-function createForm(values, submit, errors, isValid) {
+function handleTouched(elements, touched) {
+  function updateTouched(event) {
+    var el = event.currentTarget || event.target;
+    var name = el.getAttribute('name');
+    touched.update(function (state) {
+      var _a;
+
+      return __assign(__assign({}, state), (_a = {}, _a[name] = true, _a));
+    });
+    el.removeEventListener('focus', updateTouched);
+  }
+
+  elements.forEach(function (el) {
+    return el.addEventListener('focus', updateTouched);
+  });
+}
+
+function createForm(values, submit, errors, isValid, touched) {
   return function form(node) {
@@ -100,6 +117,7 @@ var nodeList = node.querySelectorAll('*[name]');
     var valueHandler = handleFormUpdates(withValidity, values, errors, isValid);
-    var submitHander = handleFormUpdates(withValidity, submit, errors, isValid);
+    var submitHandler = handleFormUpdates(withValidity, submit, errors, isValid);
+    handleTouched(withValidity, touched);
 
     if (node instanceof HTMLFormElement) {
-      node.addEventListener('submit', submitHander);
+      node.addEventListener('submit', submitHandler);
     }
@@ -113,3 +131,3 @@
         if (node instanceof HTMLFormElement) {
-          node.removeEventListener('submit', submitHander);
+          node.removeEventListener('submit', submitHandler);
         }
@@ -133,8 +151,10 @@
   var submitValues = writable({});
+  var touched = writable({});
   var validity = writable({});
   var formValid = writable(false);
   return {
-    form: createForm(formValues, submitValues, validity, formValid),
+    form: createForm(formValues, submitValues, validity, formValid, touched),
     formValues: formValues,
     submitValues: submitValues,
+    touched: touched,
     validity: validity,
@@ -141,0 +161,0 @@ formValid: formValid

svelte-formula.umd.js

@@ -96,3 +96,20 @@ (function (global, factory) {
 
-    function createForm(values, submit, errors, isValid) {
+    function handleTouched(elements, touched) {
+      function updateTouched(event) {
+        var el = event.currentTarget || event.target;
+        var name = el.getAttribute('name');
+        touched.update(function (state) {
+          var _a;
+
+          return __assign(__assign({}, state), (_a = {}, _a[name] = true, _a));
+        });
+        el.removeEventListener('focus', updateTouched);
+      }
+
+      elements.forEach(function (el) {
+        return el.addEventListener('focus', updateTouched);
+      });
+    }
+
+    function createForm(values, submit, errors, isValid, touched) {
       return function form(node) {
@@ -104,6 +121,7 @@ var nodeList = node.querySelectorAll('*[name]');
         var valueHandler = handleFormUpdates(withValidity, values, errors, isValid);
-        var submitHander = handleFormUpdates(withValidity, submit, errors, isValid);
+        var submitHandler = handleFormUpdates(withValidity, submit, errors, isValid);
+        handleTouched(withValidity, touched);
 
         if (node instanceof HTMLFormElement) {
-          node.addEventListener('submit', submitHander);
+          node.addEventListener('submit', submitHandler);
         }
@@ -117,3 +135,3 @@
             if (node instanceof HTMLFormElement) {
-              node.removeEventListener('submit', submitHander);
+              node.removeEventListener('submit', submitHandler);
             }
@@ -137,8 +155,10 @@
       var submitValues = store.writable({});
+      var touched = store.writable({});
       var validity = store.writable({});
       var formValid = store.writable(false);
       return {
-        form: createForm(formValues, submitValues, validity, formValid),
+        form: createForm(formValues, submitValues, validity, formValid, touched),
         formValues: formValues,
         submitValues: submitValues,
+        touched: touched,
         validity: validity,
@@ -145,0 +165,0 @@ formValid: formValid

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

42685

increased by3.73%

Lines of code

315

increased by12.5%

Number of lines in readme file

98

increased by5.38%

No dependency changes