feat(components): pass attributes to HTML elements

BREAKING CHANGE: requires svelte >= 3.20.0 Closes #164
mdauner · Apr 4, 2020 · 3f71240 · 3f71240
1 parent 8bcc410
commit 3f71240
Show file tree

Hide file tree

Showing 12 changed files with 110 additions and 110 deletions.
diff --git a/README.md b/README.md
@@ -126,11 +126,18 @@ $ yarn add sveltejs-forms
   let:isSubmitting
   let:isValid
 >
-  <Input name="user.email" label="Email" placeholder="e.g. user@example.com" /> <!-- nested field -->
+  <Input
+    name="user.email" <!-- nested field -->
+    label="Email Address"
+    value="test@user.com" <!-- initial value -->
+    placeholder="e.g. user@example.com" />
   <Input name="password" type="password" placeholder="Password" />
   <Select name="language" options={langOptions} />
-  <Choice name="os" options={osOptions} multiple />
-
+  <Choice
+    name="os"
+    options={osOptions}
+    disabled
+    multiple />
   <button type="reset">Reset</button>
   <button type="submit" disabled={isSubmitting}>Sign in</button>
   The form is valid: {isValid}

diff --git a/package.json b/package.json
@@ -44,11 +44,12 @@
     "rollup-plugin-terser": "~5.2.0",
     "semantic-release": "~17.0.4",
     "sirv-cli": "~0.4.5",
-    "svelte": "~3.19.2",
+    "svelte": "~3.20.0",
     "svelte-preprocess": "~3.4.0",
     "yup": "~0.28.2"
   },
   "peerDependencies": {
+    "svelte": "~3.20.0",
     "yup": "~0.28.2"
   },
   "dependencies": {

diff --git a/src/App.svelte b/src/App.svelte
@@ -82,14 +82,20 @@
   <Input
     name="user.email"
     label="Email Address"
+    value="test@user.com"
     placeholder="e.g. user@example.com" />
-  <Input
-    name="user.password"
-    type="password"
-    placeholder="Password"
-    multiline />
-  <Select name="user.language" label="Language" options={langOptions} />
-  <Choice name="user.os" options={osOptions} multiple />
+  <Input name="user.password" type="password" placeholder="Password" />
+  <Select
+    name="user.language"
+    label="Language"
+    options={langOptions}
+    value={langOptions[2].id} />
+  <Choice
+    name="user.os"
+    options={osOptions}
+    value={['linux', 'windows']}
+    disabled
+    multiple />
 
   <button type="reset">Reset</button>
   <button type="submit" disabled={isSubmitting}>Sign in</button>

diff --git a/src/components/Choice.svelte b/src/components/Choice.svelte
@@ -8,6 +8,7 @@
   export let name;
   export let options;
   export let multiple = false;
+  export let value;
 
   const { touchField, values, errors, touched, validateOnChange } = getContext(
     FORM
@@ -26,6 +27,12 @@
   function onBlur() {
     touchField(name);
   }
+
+  if (value) {
+    setTimeout(() => {
+      choice.set(value);
+    }, 0);
+  }
 </script>
 
 <div class="field" class:error={get($touched, name) && get($errors, name)}>
@@ -38,7 +45,8 @@
         on:change={onChange}
         on:blur={onBlur}
         bind:group={$choice}
-        value={option.id} />
+        value={option.id}
+        {...$$restProps} />
     {:else}
       <input
         id={option.id}
@@ -47,7 +55,8 @@
         on:change={onChange}
         on:blur={onBlur}
         bind:group={$choice}
-        value={option.id} />
+        value={option.id}
+        {...$$restProps} />
     {/if}
     {#if option.title}
       <label for={option.id}>{option.title}</label>

diff --git a/src/components/Form.svelte b/src/components/Form.svelte
@@ -96,11 +96,11 @@
     }
   }
 
-  function setValue(path, value) {
+  function setValue(path, value, validateForm = true) {
     $values = set($values, path, value);
     $touched = set($touched, path, true);
 
-    if (validateOnChange) {
+    if (validateForm && validateOnChange) {
       validate();
     }
   }

diff --git a/src/components/Input.svelte b/src/components/Input.svelte
@@ -6,7 +6,6 @@
   export let name;
   export let label = '';
   export let type = 'text';
-  export let placeholder = '';
   export let multiline = false;
 
   const { touchField, setValue, values, errors, touched } = getContext(FORM);
@@ -18,6 +17,10 @@
   function onBlur() {
     touchField(name);
   }
+
+  if (Object.keys($$restProps).includes('value')) {
+    setTimeout(() => setValue(name, $$restProps.value, false), 0);
+  }
 </script>
 
 <div class="field" class:error={get($touched, name) && get($errors, name)}>
@@ -27,20 +30,20 @@
   {#if multiline}
     <textarea
       {name}
-      {placeholder}
       id={name}
       value={get($values, name)}
       on:blur={onBlur}
-      on:change={onChange} />
+      on:change={onChange}
+      {...$$restProps} />
   {:else}
     <input
       {name}
       {type}
-      {placeholder}
       id={name}
       value={get($values, name)}
       on:blur={onBlur}
-      on:change={onChange} />
+      on:change={onChange}
+      {...$$restProps} />
   {/if}
   {#if get($touched, name) && get($errors, name)}
     <div class="message">{get($errors, name)}</div>

diff --git a/src/components/Select.svelte b/src/components/Select.svelte
@@ -16,6 +16,10 @@
   function onBlur() {
     touchField(name);
   }
+
+  if (Object.keys($$restProps).includes('value')) {
+    setTimeout(() => setValue(name, $$restProps.value, false), 0);
+  }
 </script>
 
 <div class="field" class:error={get($touched, name) && get($errors, name)}>
@@ -27,10 +31,13 @@
     id={name}
     value={get($values, name)}
     on:change={onChange}
-    on:blur={onBlur}>
+    on:blur={onBlur}
+    {...$$restProps}>
     <option value="" />
     {#each options as option}
-      <option value={option.id}>{option.title}</option>
+      <option value={option.id} selected={get($values, name) === option.id}>
+        {option.title}
+      </option>
     {/each}
   </select>
   {#if get($touched, name) && get($errors, name)}

diff --git a/tests/Form/__snapshots__/Form.spec.js.snap b/tests/Form/__snapshots__/Form.spec.js.snap
@@ -33,16 +33,19 @@ exports[`Form matches snapshot 1`] = `
           value="svelte"
         >
           Svelte
+           
         </option>
         <option
           value="react"
         >
           React
+           
         </option>
         <option
           value="angular"
         >
           Angular
+           
         </option>
       </select>
        
@@ -55,7 +58,6 @@ exports[`Form matches snapshot 1`] = `
         id="macos"
         name="os"
         type="checkbox"
-        value="macos"
       />
        
       <label
@@ -68,7 +70,6 @@ exports[`Form matches snapshot 1`] = `
         id="linux"
         name="os"
         type="checkbox"
-        value="linux"
       />
        
       <label
@@ -81,7 +82,6 @@ exports[`Form matches snapshot 1`] = `
         id="windows"
         name="os"
         type="checkbox"
-        value="windows"
       />
        
       <label
@@ -200,16 +200,19 @@ exports[`Form shows error message when schema is defined 1`] = `
           value="svelte"
         >
           Svelte
+           
         </option>
         <option
           value="react"
         >
           React
+           
         </option>
         <option
           value="angular"
         >
           Angular
+           
         </option>
       </select>
        
@@ -222,7 +225,6 @@ exports[`Form shows error message when schema is defined 1`] = `
         id="macos"
         name="os"
         type="checkbox"
-        value="macos"
       />
        
       <label
@@ -235,7 +237,6 @@ exports[`Form shows error message when schema is defined 1`] = `
         id="linux"
         name="os"
         type="checkbox"
-        value="linux"
       />
        
       <label
@@ -248,7 +249,6 @@ exports[`Form shows error message when schema is defined 1`] = `
         id="windows"
         name="os"
         type="checkbox"
-        value="windows"
       />
        
       <label

diff --git a/tests/Input/Input.spec.js b/tests/Input/Input.spec.js
@@ -14,6 +14,11 @@ describe('Input', () => {
     expect(container.firstChild).toMatchSnapshot();
   });
 
+  it('passes props to input', async () => {
+    const { container } = await render(App, { props: { disabled: true } });
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
   it('updates form value on change', async () => {
     const { component, getByPlaceholderText } = await render(App);
 

diff --git a/tests/Input/TestApp.svelte b/tests/Input/TestApp.svelte
@@ -9,6 +9,7 @@
   export let form = null;
   export let multiline = false;
   export let label = '';
+  export let disabled = false;
 </script>
 
 <Form
@@ -19,7 +20,7 @@
   on:submit={onSubmit}
   let:isSubmitting
   bind:this={form}>
-  <Input name="email" {label} placeholder="Email" {multiline} />
+  <Input name="email" {label} placeholder="Email" {multiline} {disabled} />
 
   <button type="submit" disabled={isSubmitting}>Sign in</button>
 </Form>
diff --git a/tests/Input/__snapshots__/Input.spec.js.snap b/tests/Input/__snapshots__/Input.spec.js.snap
@@ -27,6 +27,34 @@ exports[`Input matches snapshot 1`] = `
 </div>
 `;
 
+exports[`Input passes props 1`] = `
+<div>
+  <form
+    class="sveltejs-forms"
+  >
+    <div
+      class="field"
+    >
+       
+      <input
+        disabled=""
+        id="email"
+        name="email"
+        placeholder="Email"
+        type="text"
+      />
+       
+    </div>
+     
+    <button
+      type="submit"
+    >
+      Sign in
+    </button>
+  </form>
+</div>
+`;
+
 exports[`Input renders label 1`] = `
 <div>
   <form