sveltik - npm Package Compare versions

Comparing version 0.1.5 to 0.1.6

package.json

 {
     "name": "sveltik",
-    "version": "0.1.5",
+    "version": "0.1.6",
     "repository": "[e-mail]:mapgrid/sveltik.git",
@@ -16,3 +16,3 @@ "author": "mapgrid <[e-mail]>",
         "babel-jest": "^25.1.0",
-        "dainte": "^0.1.3",
+        "dainte": "^0.1.4",
         "jest": "^25.1.0",
@@ -19,0 +19,0 @@ "jsdom": "^16.2.0",

README.md

@@ -351,5 +351,6 @@ # Sveltik
 export let field
+export let props
 </script>
 
-<input {...field} on:input={field.handleInput} on:blur={field.handleBlur} />
+<input {...field} {...props} on:input={field.handleInput} on:blur={field.handleBlur} />
 ```
@@ -420,5 +421,113 @@
 
+#### Props
+
+##### `as?: string | Component`
+
+Either a Svelte component or the name of an HTML element to render. Supports the following:
+
+- `input`
+- `select`
+- `textarea`
+
+Svelte components must `export let` the props that they expect to be passed.
+The available props are match the let:props (see below). Also is passed an additional prop
+`props` which contains all additional props passed to `<Field />`.
+
+##### `name: string`
+
+A field's name in Sveltik state. Required.
+
+##### `validate?: (value: any) => undefined | string`
+
+You can run independent field-level validations by passing a function to the `validate` prop.
+The function will respect the `validateOnBlur` and `validateOnChange` config/props specified in the `<Field>`'s parent `<Sveltik>`.
+
+If invalid, return a `string` containing the error message or return `undefined`.
+
+#### let:props
+
+##### `let:field: FieldInputProps`
+
+An object that contains:
+
+- `name: string` - The name of the field
+- `value: any` - The value of the field
+- `handleInput: (e: HTMLInputEvent) => void` - Input handler to be bound with `on:input`
+- `handleBlur: (e: HTMLBlurEvent) => void` - Blur handler to be bound with `on:blur`
+
+##### `let:form: SveltikBag`
+
+##### `let:meta: FieldMetaProps`
+
+An object that contains:
+
+- `initialError?: string` - The field's initial error if the field is present in `initialErrors`
+- `initialTouched?: boolean` - The field's initial value if the field is present in `initialTouched`
+- `initialValue?: any` - The field's initial value if the field is given a value in `initialValues`
+- `initialWarning?: string` - The field's initial warning if the field is given a value in `initialWarnings`
+- `error?: string` - The field's error message
+- `touched?: boolean` - Whether the field has been visited
+- `value?: any` - The field's value
+- `warning?: string` - The field's warning message
+
 #### Differences with Formik
 
 - Validation is synchronous
-- Event handlers must be set implictly with `on:input`, `on:blur` instead of spread attributes.
+- Event handlers must be set implictly with `on:input`, `on:blur` instead of spread attributes.
+- Nested field names (paths) are not supported.
+
+## `<Form />`
+
+Form is a small wrapper around an HTML `<form>` element that automatically hooks into Sveltik's `handleSubmit` and `handleReset`.
+All other props are passed directly through to the DOM node.
+
+```js
+// so...
+<Form />
+
+// is identical to this...
+<form on:reset={props.handleReset} on:submit={props.handleSubmit} {...props} />
+```
+
+## `<ErrorMessage />`
+
+`<ErrorMessage />` is a component that renders the error message of a given field
+if that field has been visited (i.e.`touched[name] === true`) (and there is an `error` message present).
+It expects that all error messages are stored for a given field as a string.
+
+### Props
+
+- `as?: string | Component`
+- `name: string`
+
+### let:props
+
+- `let:msg: string`
+
+### Reference
+
+#### Props
+
+##### `as?: string | Component`
+
+Either a Svelte component or the name of an HTML element to render.
+If not specified, `<ErrorMessage />` will just return a string.
+
+Svelte components must `export let` the props that they expect to be passed.
+The available props are match the let:props (see below).
+Also is passed an additional prop `props` which contains all additional props passed to `<ErrorMessage />`.
+
+##### `name: string`
+
+A field's name in Sveltik state. Required.
+
+#### let:props
+
+##### `let:msg: string`
+
+A field's error message.
+
+#### Differences with Formik
+
+- Nested field names (paths) are not supported.
+- Uses `as` prop instead of `component` for consistency with `<Field />`

No alert changes

Improved metrics

Total package byte prevSize

569771

increased by13.6%

Lines of code

17144

increased by7.1%

Number of lines in readme file

532

increased by26.07%

No dependency changes