svelte-inline-input

An inline editable input component for Svelte.

Displays as text and becomes editable by clicking or tapping.

You can read how it was built here

Installation

npm install svelte-inline-input

Browser

<script type="text/javascript" src="https://unpkg.com/svelte-inline-input"></script>

Module

import InlineInput from 'svelte-inline-input';

Usage

Once installed, it can be used in a template as:

<InlineInput bind:value />

See the props table below for the available options.

Props

Property	Type	Description	Default
type	string	The input type. Could be text, number, textarea or select	text
placeholder	string	Text to be shown as a placeholder while there is no input	empty string
labelClasses	string	CSS classes for the label element	empty string
inputClasses	string	CSS classes for the input element	empty string
rows	integer	Textarea rows	2
cols	integer	Textarea columns	20
options	array	Provides the options for selects. Each object should have the format `{label: x, value: x}`	[]

Events

Event	Description
blur	Fired when the input element loses focus. Also provides the input element's value

License

MIT

Input Validation

First and foremost let me say thanks, double thanks in fact, this package is brilliant! 👍

I'd link the medium article from the github Readme and maybe put the animated gif from the medium article page there as well so folks get a quick grasp of how cool this package actually is 😃

One thing I was thinking about is how to do some input validation with svelte-inline-input?!

I'm currently using https://github.com/tjinauyeung/svelte-forms-lib with it's custom helpers such as <Form> and yup https://svelte-forms-lib-sapper-docs.now.sh/helpers but I figure I'd ask you how you do it and then maybe https://svelte-forms-lib-sapper-docs.now.sh/yup is something that could work together with svelte-inline-input?

Would be brilliant if <InlineInput> would be another <Field> like here https://svelte-forms-lib-sapper-docs.now.sh/field

Then using it would look something like this

  <script>
    import { Form, Field } from "svelte-forms-lib";
    import * as yup from "yup";

    const formProps = {
      initialValues: {
        text: "",
        email: "",
        password: "",
        number: 0,
        date: "",
        hobby:""
      },
      validationSchema: yup.object().shape({
        text: yup.string(),
        email: yup.string().email(),
        password: yup.string(),
        number: yup.number(),
        date: yup.date(),
        hobby: yup.string()
      }),
      onSubmit: values => {
        alert(JSON.stringify(values, null, 2));
      }
    };
  </script>

  <Form {...formProps}>
    <label>input[type=text]</label>
    <Field name="text" type="text" />

    <label>input[type=password]</label>
    <Field name="password" type="password" />

    <label>input[type=email]</label>
    <Field name="email" type="email" />

    <label>input[type=number]</label>
    <Field name="number" type="number" />

    <label>input[type=date]</label>
    <Field name="date" type="date" />

    <label>input[type=inline]</label>            // <--- using svelte-inline-input 🤔
    <Field name="hobby" type="inline" />

    <button type="submit">submit</button>
  </Form>

ukchukx / svelte-inline-input Goto Github PK