svelte-formula - npm Package Compare versions

Comparing version 0.8.3 to 0.8.4

CHANGELOG.md

@@ -8,2 +8,8 @@ # Changelog
 
+## [0.8.4] - 2021-02-23
+
+### Fixed
+
+- When a single value field is emptied after having values, correctly update the form state instead of leaving value value
+
 ## [0.8.3] - 2021-02-22
@@ -10,0 +16,0 @@

package.json

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

README.md

@@ -33,7 +33,8 @@ # Svelte Formula
     import { createEventDispatcher } from 'svelte';
-		import { get } from 'svelte/store'
-		import { formula } from 'svelte-formula@0.8.2'
+    import { get } from 'svelte/store'
+    import { formula } from 'svelte-formula@0.8.2'
+    
     const { form, isFormValid, validity, touched, submitValues } = formula();
 
-		const dispatcher = createEventDispatcher()
+    const dispatcher = createEventDispatcher()
 
@@ -46,8 +47,8 @@ // Allow components to accept value that can be used as default values
 
-		// Handle submission of data easily to parent components or services
-		function submitForm() {
-			dispatch('updateProject', {
-				user: get(submitValues)
-			})
-		}
+    // Handle submission of data easily to parent components or services
+    function submitForm() {
+      dispatch('updateUser', {
+        user: get(submitValues)
+      })
+    }
   </script>
@@ -57,15 +58,15 @@
 <form use:form on:submit|preventDefault={submitForm}>
-	<div class="form-field">
-		<label for="userName">User Name</label>
-		<input type="text" id="userName" name="userName" required minlength="8" class:error={usernameInvalid} bind:value={userName} />
-		<span hidden={!usernameInvalid}>{$validity?.userName?.message}</span>
-	</div>
-
-	<button disabled={!$isFormValid} type="submit">Update User Name</button>
+  <div class="form-field">
+    <label for="userName">User Name</label>
+    <input type="text" id="userName" name="userName" required minlength="8" class:error={usernameInvalid} bind:value={userName} />
+    <span hidden={!usernameInvalid}>{$validity?.userName?.message}</span>
+  </div>
+  
+  <button disabled={!$isFormValid} type="submit">Update User Name</button>
 </form>
 
 <style>
-	.error {
-		border: 1px solid hotpink;
-	}
+  .error {
+    border: 1px solid hotpink;
+  }
 </style>
@@ -72,0 +73,0 @@ ```

svelte-formula.esm.js

@@ -451,3 +451,3 @@ import { get, writable } from 'svelte/store';
             var val = parseFloat(element.value);
-            return !isNaN(val) ? val : null;
+            return !isNaN(val) ? val : '';
           }();
@@ -470,3 +470,3 @@ break;
           });
-          elValue = foundElement ? foundElement.value : null;
+          elValue = foundElement ? foundElement.value : '';
           break;
@@ -485,3 +485,3 @@ }
             return v.id === element.id ? element.value : v.value;
-          }) : element.value || null;
+          }) : element.value;
         }
@@ -606,2 +606,3 @@ }
 
+  console.log(name, value);
   stores.formValues.update(function (state) {
@@ -608,0 +609,0 @@ var _a;

svelte-formula.umd.js

@@ -455,3 +455,3 @@ (function (global, factory) {
                 var val = parseFloat(element.value);
-                return !isNaN(val) ? val : null;
+                return !isNaN(val) ? val : '';
               }();
@@ -474,3 +474,3 @@ break;
               });
-              elValue = foundElement ? foundElement.value : null;
+              elValue = foundElement ? foundElement.value : '';
               break;
@@ -489,3 +489,3 @@ }
                 return v.id === element.id ? element.value : v.value;
-              }) : element.value || null;
+              }) : element.value;
             }
@@ -610,2 +610,3 @@ }
 
+      console.log(name, value);
       stores.formValues.update(function (state) {
@@ -612,0 +613,0 @@ var _a;

No alert changes

Improved metrics

Total package byte prevSize

124527

increased by0.19%

Lines of code

3091

increased by0.06%

Number of lines in readme file

74

increased by1.37%

No dependency changes