Merge branch 'eddiew-master'

Author: hperrin

packages/textfield/Input.svelte

@@ -36,7 +36,7 @@
   $: if (type === 'file') {
     delete valueProp.value;
   } else {
-    valueProp.value = value;
+    valueProp.value = value === undefined ? '' : value;
   }
 
   onMount(() => {
@@ -46,7 +46,12 @@
   });
 
   function toNumber(value) {
-    return value === '' ? undefined : +value;
+    if (value === '') {
+      const nan = new Number(Number.NaN);
+      nan.length = 0;
+      return nan;
+    }
+    return +value;
   }
 
   function valueUpdater(e) {

packages/textfield/Textfield.svelte

@@ -33,6 +33,7 @@
         {type}
         {disabled}
         bind:value
+        bind:files
         bind:dirty
         bind:invalid
         {updateInvalid}
@@ -112,6 +113,7 @@
   export let label = null;
   export let type = 'text';
   export let value = uninitializedValue;
+  export let files = uninitializedValue;
   export let dirty = false;
   export let invalid = uninitializedValue;
   export let updateInvalid = invalid === uninitializedValue;
@@ -122,11 +124,11 @@
   let element;
   let textField;
 
-  $: valued = value !== uninitializedValue;
+  $: valued = value !== uninitializedValue || files !== uninitializedValue;
 
   $: placeholderProp = (fullwidth && label) ? {placeholder: label} : {};
 
-  $: if (textField && valued && textField.value !== value) {
+  $: if (textField && value !== uninitializedValue && textField.value !== value) {
     textField.value = value;
   }
 

site/src/routes/demo/textfield.svelte

@@ -423,6 +423,24 @@
     </div>
   </div>
 
+  <div>
+    Different Types:
+
+    <div class="columns margins">
+      <div>
+        <Textfield bind:value={valueTypeNumber} label="Number" type="number" />
+      </div>
+
+      <div>
+        <Textfield bind:value={valueTypeDate} label="DateTime-Local" type="datetime-local" />
+      </div>
+
+      <div>
+        <Textfield bind:files={valueTypeFiles} label="File" type="file" on:change={handleFiles} />
+      </div>
+    </div>
+  </div>
+
   <div>
     Manual Setup:
 
@@ -530,6 +548,9 @@
   let valueFullwidth = '';
   let valueFullwidthTextarea = '';
   let valueElementsLabel = '';
+  let valueTypeNumber = 0;
+  let valueTypeDate = '';
+  let valueTypeFiles = [];
   let valueManualA = '';
   let valueManualB = '';
   let valueManualC = '';
@@ -540,6 +561,10 @@
     valueClickable = '';
     dirtyClickable = false;
   }
+
+  function handleFiles() {
+    alert('Selected '+valueTypeFiles.length+' file(s).');
+  }
 </script>
 
 <style>