open-index/open-npm huggingface dataset:
npm package: @felte/common
Description: Common utilities for Felte packages
Author: Pablo Berganza
Latest version: 1.1.9

# @felte/common

[![Tests](https://github.com/pablo-abc/felte/workflows/Tests/badge.svg)](https://github.com/pablo-abc/felte/actions/workflows/test.yml)
[![Bundle size](https://img.shields.io/bundlephobia/min/@felte/common)](https://bundlephobia.com/result?p=@felte/common)
[![NPM Version](https://img.shields.io/npm/v/@felte/common)](https://www.npmjs.com/package/@felte/common)
[![codecov](https://codecov.io/gh/pablo-abc/felte/branch/main/graph/badge.svg?token=T73OJZ50LC)](https://codecov.io/gh/pablo-abc/felte)

Common utilities and types for Felte and its related packages.
npm package: @felte/core
Description: Core utility for Felte's integration with front-end frameworks
Author: Pablo Berganza
Latest version: 1.4.4

# @felte/core

[![Tests](https://github.com/pablo-abc/felte/workflows/Tests/badge.svg)](https://github.com/pablo-abc/felte/actions/workflows/test.yml)
[![Bundle size](https://img.shields.io/bundlephobia/min/@felte/core)](https://bundlephobia.com/result?p=@felte/core)
[![NPM Version](https://img.shields.io/npm/v/@felte/core)](https://www.npmjs.com/package/@felte/core)
[![codecov](https://codecov.io/gh/pablo-abc/felte/branch/main/graph/badge.svg?token=T73OJZ50LC)](https://codecov.io/gh/pablo-abc/felte)

The core package containing the main functionality of Felte. This allows to make Felte compatible with multiple frameworks or vanilla javascript. More documenttion on this pending.

Since this package is _bundled_ with other packages, breaking changes might occur in between minor versions, specially if they're required to _prevent_ breaking changes on the other packages.

If you're looking to use Felte for any of your apps, you're most likely looking for:

- [felte](/packages/felte) if you're working with Svelte.

- [@felte/solid](/packages/solid) if you're working with Solid.

- [@felte/react](/packages/react) if your're working with React.

- [@felte/element](/packages/element) if you're working with vanilla JS.
npm package: @felte/extender-persist
Description: Use localStorage to persist your Felte forms
Author: Pablo Berganza
Latest version: 1.0.17

# @felte/extender-persist

[![Tests](https://github.com/pablo-abc/felte/workflows/Tests/badge.svg)](https://github.com/pablo-abc/felte/actions/workflows/test.yml)
[![Bundle size](https://img.shields.io/bundlephobia/min/@felte/extender-persist)](https://bundlephobia.com/result?p=@felte/extender-persist)
[![NPM Version](https://img.shields.io/npm/v/@felte/extender-persist)](https://www.npmjs.com/package/@felte/extender-persist)
[![codecov](https://codecov.io/gh/pablo-abc/felte/branch/main/graph/badge.svg?token=T73OJZ50LC)](https://codecov.io/gh/pablo-abc/felte)

A package to persist your form's state in localStorage.

## Installation

```sh
npm install --save @felte/extender-persist

# Or, if you use yarn

yarn add @felte/extender-persist
```

## Usage

Extend Felte with the `extender` export, the extenders accepts an object with options. A unique ID is required to use it as the ID for the localStorage.

```javascript
import { extender } from '@felte/extender-persist';

const { form } = createForm({
  // ...
  extend: extender({ id: 'uniqueId' }), // or `extend: [extender({ id: 'uniqueId' })],`
  // ...
});
```

## Ignoring fields

You might not want to save certain fields such as passwords to local storage, for this you may add an extra property to the configuration of the extender with an array of paths to the data you want to ignore:

```javascript
{
  extend: extender({ id: 'uniqueId', ignore: ['account.password'] }),
}
```

Or you may add the attribute `data-felte-extender-persist-ignore` to the input you don't want to persist.
npm package: @felte/preact
Description: An extensible form library for Preact
Author: Pablo Berganza
Latest version: 1.2.14

# Felte: A form library for Preact

[![Tests](https://github.com/pablo-abc/felte/workflows/Tests/badge.svg)](https://github.com/pablo-abc/felte/actions/workflows/test.yml)
[![Bundle size](https://img.shields.io/bundlephobia/min/@felte/preact)](https://bundlephobia.com/result?p=@felte/preact)
[![NPM Version](https://img.shields.io/npm/v/@felte/preact)](https://www.npmjs.com/package/@felte/preact)
[![codecov](https://codecov.io/gh/pablo-abc/felte/branch/main/graph/badge.svg?token=T73OJZ50LC)](https://codecov.io/gh/pablo-abc/felte)

Felte is an extensible form library originally built for Svelte but easily integrated with Preact using this package. Felte, on its most simple form, only requires you to set a `ref` to your form element to work. No custom `Field` or `Form` components are needed, making custom styles really easy to do. If you want to see it in action, you can check this [CodeSandbox demo](https://codesandbox.io/s/felte-preact-demo-svkbbe?file=/src/App.js).

## Features

- Single action to make your form reactive.
- Use HTML5 native elements to create your form. (Only the `name` attribute is necessary).
- No re-renders at all unless you need to use a specific field's value within your component.
- Provides stores and helper functions to handle more complex use cases.
- No assumptions on your validation strategy. Use any validation library you want or write your own strategy.
- Handles addition and removal of form controls during runtime.
- Official solutions for error reporting using `reporter` packages.
- Well tested. Currently at [99% code coverage](https://app.codecov.io/gh/pablo-abc/felte) and constantly working on improving test quality.
- Supports validation with [yup](/packages/validator-yup/README.md), [zod](/packages/validator-zod/README.md) and [superstruct](/packages/validator-superstruct/README.md).
- Easily [extend its functionality](https://felte.dev/docs/react/extending-felte).

## Simple usage example

```jsx
import { h } from 'preact';
import { useForm } from '@felte/preact';

function Form() {
  const { form } = useForm({
    onSubmit: (values) => console.log(values),
  });

  return (
    <form ref={form}>
      <input name="email" />
      <input name="password" type="password" />
      <button type="submit">Submit</button>
    </form>
  );
}
```

## Installation

```sh
npm install --save @felte/preact

# Or, if you use yarn

yarn add @felte/preact
```

## Usage

To learn more about how to use `@felte/preact` to handle your forms, check the [official documentation](https://felte.dev/docs/react/getting-started). The API is exactly the same as `@felte/react` except for the import.
npm package: @felte/react
Description: An extensible form library for ReactJS
Author: Pablo Berganza
Latest version: 1.2.14

# Felte: A form library for React

[![Tests](https://github.com/pablo-abc/felte/workflows/Tests/badge.svg)](https://github.com/pablo-abc/felte/actions/workflows/test.yml)
[![Bundle size](https://img.shields.io/bundlephobia/min/@felte/react)](https://bundlephobia.com/result?p=@felte/react)
[![NPM Version](https://img.shields.io/npm/v/@felte/react)](https://www.npmjs.com/package/@felte/react)
[![codecov](https://codecov.io/gh/pablo-abc/felte/branch/main/graph/badge.svg?token=T73OJZ50LC)](https://codecov.io/gh/pablo-abc/felte)

Felte is an extensible form library originally built for Svelte but easily integrated with React using this package. Felte, on its most simple form, only requires you to set a `ref` to your form element to work. No custom `Field`or `Form` components are needed, making custom styles really easy to do. You can see it in action in this [CodeSandbox demo](https://codesandbox.io/s/felte-react-demo-q2xxw?file=/src/App.js)

## Features

- Single action to make your form reactive.
- Use HTML5 native elements to create your form. (Only the `name` attribute is necessary).
- No re-renders at all unless you need to use a specific field's value within your component.
- Provides stores and helper functions to handle more complex use cases.
- No assumptions on your validation strategy. Use any validation library you want or write your own strategy.
- Handles addition and removal of form controls during runtime.
- Official solutions for error reporting using `reporter` packages.
- Well tested. Currently at [99% code coverage](https://app.codecov.io/gh/pablo-abc/felte) and constantly working on improving test quality.
- Supports validation with [yup](/packages/validator-yup/README.md), [zod](/packages/validator-zod/README.md) and [superstruct](/packages/validator-superstruct/README.md).
- Easily [extend its functionality](https://felte.dev/docs/react/extending-felte).

## Simple usage example

```jsx
import React, { useEffect } from 'react';
import { useForm } from '@felte/react';

function Form() {
  const { form } = useForm({
    onSubmit: (values) => console.log(values),
  });

  return (
    <form ref={form}>
      <input name="email" />
      <input name="password" type="password" />
      <button type="submit">Submit</button>
    </form>
  );
}
```

## Installation

```sh
npm install --save @felte/react

# Or, if you use yarn

yarn add @felte/react
```

## Usage

To learn more about how to use `@felte/react` to handle your forms, check the [official documentation](https://felte.dev/docs/react/getting-started).
npm package: @felte/reporter-cvapi
Description: An error reporter for Felte using the browser's Constraint Validation API
Author: Pablo Berganza
Latest version: 1.1.10

# @felte/reporter-cvapi

[![Tests](https://github.com/pablo-abc/felte/workflows/Tests/badge.svg)](https://github.com/pablo-abc/felte/actions/workflows/test.yml)
[![Bundle size](https://img.shields.io/bundlephobia/min/@felte/reporter-cvapi)](https://bundlephobia.com/result?p=@felte/reporter-cvapi)
[![NPM Version](https://img.shields.io/npm/v/@felte/reporter-cvapi)](https://www.npmjs.com/package/@felte/reporter-cvapi)
[![codecov](https://codecov.io/gh/pablo-abc/felte/branch/main/graph/badge.svg?token=T73OJZ50LC)](https://codecov.io/gh/pablo-abc/felte)

A Felte reporter that uses the browser's [constraint validation API](https://developer.mozilla.org/en-US/docs/Web/API/Constraint_validation) to display your error messages.

## Installation

```sh
npm install --save @felte/reporter-cvapi

# Or, if you use yarn

yarn add @felte/reporter-cvapi
```

## Usage

Add it to the `extend` property of Felte's `createForm` configuration object.

```javascript
import reporter from '@felte/reporter-cvapi';

const { form } = createForm({
  // ...
  extend: reporter,
  // ...
});
```
npm package: @felte/reporter-dom
Description: An error reporter for Felte using the DOM
Author: Pablo Berganza
Latest version: 1.1.10

# @felte/reporter-dom

[![Tests](https://github.com/pablo-abc/felte/workflows/Tests/badge.svg)](https://github.com/pablo-abc/felte/actions/workflows/test.yml)
[![Bundle size](https://img.shields.io/bundlephobia/min/@felte/reporter-dom)](https://bundlephobia.com/result?p=@felte/reporter-dom)
[![NPM Version](https://img.shields.io/npm/v/@felte/reporter-dom)](https://www.npmjs.com/package/@felte/reporter-dom)
[![codecov](https://codecov.io/gh/pablo-abc/felte/branch/main/graph/badge.svg?token=T73OJZ50LC)](https://codecov.io/gh/pablo-abc/felte)

A Felte reporter that uses the DOM to display your error messages.

## Installation

```sh
npm install --save @felte/reporter-dom

# Or, if you use yarn

yarn add @felte/reporter-dom
```

## Usage

The default export is a function you can pass options to that describe the behaviour. The current options are:

```typescript
interface DomReporterOptions {
  listType?: 'ul' | 'ol';
  single?: boolean;
}
```

- `single` tells the reporter to display only a single message with a `span` element. If false, displays the messages in a list. Default: `false`.
- `listType` defines the element to be used for the list. Default: `ul`.

Add it to the `extend` property of Felte's `createForm` configuration object.

```javascript
import reporterDom from '@felte/reporter-dom';

const { form } = createForm({
  // ...
  extend: reporterDom(),
  // ...
});
```

In order to show the errors for a field, you'll need to add a container for each of these elements. For example

```html
<label for="email">Email:</label>
<input name="email" aria-describedby="email-validation" />
<div id="email-validation" data-felte-reporter-dom-for="email" />
```

You can choose individually if you want to show errors as a `span` or a list wit the attributes `data-felte-reporter-dom-as-single` and `data-felte-reporter-dom-as-list` respectively.

### Warnings

This reporter can help you display your `warning` messages as well. If you want this reporter to insert a warning message in a DOM element, you'll want to set the attribute `data-felte-reporter-dom-level` with the value `warning`. By default it would display errors.

```html
<label for="email">Email:</label>
<input name="email" aria-describedby="email-validation" />
<div
  id="email-validation"
  data-felte-reporter-dom-for="email"
  data-felte-reporter-dom-level="warning"
/>
```

## Styling

This reporter will add the error messages inside of your container element.

If the `single` option is `true`, then it will add a single message in a `span` element with the attribute `data-felte-reporter-dom-single-message`. You can style this with the CSS selector `[data-felte-reporter-dom-single-message]`.

If `single` is `false` then it will add a single list (using the element defined in `listType`) with the attribute `data-felte-reporter-dom-list`. The list will containe a `li` element per message, each with the attribute `data-felte-reporter-dom-list-message`. You can style them using a similar CSS selector as described above.
npm package: @felte/reporter-preact
Description: An error reporter for Felte using a Preact component
Author: Pablo Berganza
Latest version: 1.1.10

# @felte/reporter-preact

[![Tests](https://github.com/pablo-abc/felte/workflows/Tests/badge.svg)](https://github.com/pablo-abc/felte/actions/workflows/test.yml)
[![Bundle size](https://img.shields.io/bundlephobia/min/@felte/reporter-preact)](https://bundlephobia.com/result?p=@felte/reporter-preact)
[![NPM Version](https://img.shields.io/npm/v/@felte/reporter-preact)](https://www.npmjs.com/package/@felte/reporter-preact)
[![codecov](https://codecov.io/gh/pablo-abc/felte/branch/main/graph/badge.svg?token=T73OJZ50LC)](https://codecov.io/gh/pablo-abc/felte)

A Felte reporter that uses a custom Preact component to report errors.

## Installation

```sh
# npm
npm i -S @felte/reporter-preact

# yarn
yarn add @felte/reporter-preact
```

## Usage

Its usage is exactly the same as `@felte/reporter-react` except for the import statements.

The package exports a `reporter` function and a `ValidationMessage` component. Pass the `reporter` function to the `extend` option of `useForm` and add the `ValidationMessage` component wherever you want your validation messages to be displayed.

The `ValidationMessage` component needs a `for` prop set with the **name** of the input it corresponds to, the child of `ValidationMessage` is a function that takes the error messages as an argument. This can be either a `string`, an array of `strings`, or `undefined`.

```tsx
import { reporter, ValidationMessage } from '@felte/reporter-preact';
import { useForm } from '@felte/preact';

export function Form() {
  const { form } = useForm({
      // ...
      extend: reporter,
      // ...
    },
  })

  return (
    <form ref={form}>
      <label htmlFor="email">Email:</label>
      <input id="email" type="text" name="email" />
      <ValidationMessage for="email">
        <!-- We assume a there's only going to be one message -->
        {(message) => <span>{message?.[0]}</span>}
      </ValidationMessage>
      <label htmlFor="password">Password:</label>
      <input id="password" type="password" name="password" />
      <ValidationMessage for="password">
        {(message) => <span>{message?.[0]}</span>}
      </ValidationMessage>
      <input type="submit" value="Sign in" />
    </form>
  );
}
```

## Warnings

This reporter can help you display your `warning` messages as well. If you want your `ValidationMessage` component to display the warnings for a field you'll need to set the `level` prop to the value `warning`. By default this prop has a value of `error`.

```html
<ValidationMessage level="warning" for="email">
  {(message) => <span>{message?.[0]}</span>}
</ValidationMessage>
```
npm package: @felte/reporter-react
Description: An error reporter for Felte using a React component
Author: Pablo Berganza
Latest version: 1.2.10

# @felte/reporter-react

[![Tests](https://github.com/pablo-abc/felte/workflows/Tests/badge.svg)](https://github.com/pablo-abc/felte/actions/workflows/test.yml)
[![Bundle size](https://img.shields.io/bundlephobia/min/@felte/reporter-react)](https://bundlephobia.com/result?p=@felte/reporter-react)
[![NPM Version](https://img.shields.io/npm/v/@felte/reporter-react)](https://www.npmjs.com/package/@felte/reporter-react)
[![codecov](https://codecov.io/gh/pablo-abc/felte/branch/main/graph/badge.svg?token=T73OJZ50LC)](https://codecov.io/gh/pablo-abc/felte)

A Felte reporter that uses a custom React component to report errors.

## Installation

```sh
# npm
npm i -S @felte/reporter-react

# yarn
yarn add @felte/reporter-react
```

## Usage

The package exports a `reporter` function and a `ValidationMessage` component. Pass the `reporter` function to the `extend` option of `useForm` and add the `ValidationMessage` component wherever you want your validation messages to be displayed.

The `ValidationMessage` component needs a `for` prop set with the **name** of the input it corresponds to, the child of `ValidationMessage` is a function that takes the error messages as an argument. This can be either a `string`, an array of `strings`, or `undefined`.

```tsx
import { reporter, ValidationMessage } from '@felte/reporter-react';
import { useForm } from '@felte/react';

export function Form() {
  const { form } = useForm({
      // ...
      extend: reporter,
      // ...
    },
  })

  return (
    <form ref={form}>
      <label htmlFor="email">Email:</label>
      <input id="email" type="text" name="email" />
      <ValidationMessage for="email">
        <!-- We assume a there's only going to be one message -->
        {(message) => <span>{message?.[0]}</span>}
      </ValidationMessage>
      <label htmlFor="password">Password:</label>
      <input id="password" type="password" name="password" />
      <ValidationMessage for="password">
        {(message) => <span>{message?.[0]}</span>}
      </ValidationMessage>
      <input type="submit" value="Sign in" />
    </form>
  );
}
```

## Warnings

This reporter can help you display your `warning` messages as well. If you want your `ValidationMessage` component to display the warnings for a field you'll need to set the `level` prop to the value `warning`. By default this prop has a value of `error`.

```html
<ValidationMessage level="warning" for="email">
  {(message) => <span>{message?.[0]}</span>}
</ValidationMessage>
```
npm package: @felte/reporter-solid
Description: An error reporter for Felte using a Solid component
Author: Pablo Berganza
Latest version: 1.2.11

# @felte/reporter-solid

[![Tests](https://github.com/pablo-abc/felte/workflows/Tests/badge.svg)](https://github.com/pablo-abc/felte/actions/workflows/test.yml)
[![Bundle size](https://img.shields.io/bundlephobia/min/@felte/reporter-solid)](https://bundlephobia.com/result?p=@felte/reporter-solid)
[![NPM Version](https://img.shields.io/npm/v/@felte/reporter-solid)](https://www.npmjs.com/package/@felte/reporter-solid)
[![codecov](https://codecov.io/gh/pablo-abc/felte/branch/main/graph/badge.svg?token=T73OJZ50LC)](https://codecov.io/gh/pablo-abc/felte)

A Felte reporter that uses a custom Solid component to report errors.

## Installation

```sh
# npm
npm i -S @felte/reporter-solid

# yarn
yarn add @felte/reporter-solid
```

## Usage

The package exports a `reporter` function and a `ValidationMessage` component. Pass the `reporter` function to the `extend` option of `createForm` and add the `ValidationMessage` component wherever you want your validation messages to be displayed.

The `ValidationMessage` component needs a `for` prop set with the **name** of the input it corresponds to, the child of `ValidationMessage` is a function that takes the error messages as an argument. This can be either a `string`, an array of `strings`, or `undefined`.

```tsx
import { reporter, ValidationMessage } from '@felte/reporter-solid';
import { createForm } from '@felte/solid';

export function Form() {
  const { form } = createForm({
      // ...
      extend: reporter,
      // ...
    },
  })

  return (
    <form use:form>
      <input id="email" type="text" name="email" />
      <ValidationMessage for="email">
        <!-- We assume a there's only going to be one message -->
        {(message) => <span>{message?.[0]}</span>}
      </ValidationMessage>
      <input type="password" name="password" />
      <ValidationMessage for="password">
        {(message) => <span>{message?.[0]}</span>}
      </ValidationMessage>
      <input type="submit" value="Sign in" />
    </form>
  );
}
```

## Warnings

This reporter can help you display your `warning` messages as well. If you want your `ValidationMessage` component to display the warnings for a field you'll need to set the `level` prop to the value `warning`. By default this prop has a value of `error`.

```html
<ValidationMessage level="warning" for="email">
  {(message) => <span>{message?.[0]}</span>}
</ValidationMessage>
```
npm package: @felte/solid
Description: An extensible form library for SolidJS
Author: Pablo Berganza
Latest version: 1.2.14

# Felte: A form library for Solid

[![Tests](https://github.com/pablo-abc/felte/workflows/Tests/badge.svg)](https://github.com/pablo-abc/felte/actions/workflows/test.yml)
[![Bundle size](https://img.shields.io/bundlephobia/min/@felte/solid)](https://bundlephobia.com/result?p=@felte/solid)
[![NPM Version](https://img.shields.io/npm/v/@felte/solid)](https://www.npmjs.com/package/@felte/solid)
[![codecov](https://codecov.io/gh/pablo-abc/felte/branch/main/graph/badge.svg?token=T73OJZ50LC)](https://codecov.io/gh/pablo-abc/felte)


Felte is a simple to use form library originally built for Svelte but only needing minor modifications to work well with Solid. For Solid its functionality is based on the `use` directive. No `Field` or `Form` components, just plain stores and directives to build your form however you like. You can see it in action in this [CodeSandbox demo](https://codesandbox.io/s/felte-v1-demo-solidjs-rt0cm?from-embed=&file=/src/main.tsx)!

## Features

- Single action to make your form reactive.
- Use HTML5 native elements to create your form. (Only the `name` attribute is necessary).
- Provides stores and helper functions to handle more complex use cases.
- No assumptions on your validation strategy. Use any validation library you want or write your own strategy.
- Handles addition and removal of form controls during runtime.
- Official solutions for error reporting using `reporter` packages.
- Well tested. Currently at [99% code coverage](https://app.codecov.io/gh/pablo-abc/felte) and constantly working on improving test quality.
- Supports validation with [yup](/packages/validator-yup/README.md), [zod](/packages/validator-zod/README.md) and [superstruct](/packages/validator-superstruct/README.md).
- Easily [extend its functionality](https://felte.dev/docs/solid/extending-felte).

## Simple usage example

```jsx
import { createForm } from '@felte/solid';

const Form = () => {
  const { form } = createForm({
    // ...
    onSubmit: (values) => console.log(values),
    // ...
  });
  return (
    <form use:form>
      <input type="text" name="email" />
      <input type="password" name="password" />
      <input type="submit" value="Sign in" />
    </form>
  )
}
```

## Installation

```sh
npm install --save @felte/solid

# Or, if you use yarn

yarn add @felte/solid
```

## Usage

To learn more about how to use `@felte/solid` to handle your forms, check the [official documentation](https://felte.dev/docs/solid/getting-started).
npm package: @felte/vue
Description: An extensible form library for VueJS
Author: Pablo Berganza
Latest version: 0.1.3

# Felte: A form library for Vue JS

[![Tests](https://github.com/pablo-abc/felte/workflows/Tests/badge.svg)](https://github.com/pablo-abc/felte/actions/workflows/test.yml)
[![Bundle size](https://img.shields.io/bundlephobia/min/@felte/vue)](https://bundlephobia.com/result?p=@felte/vanilla)
[![NPM Version](https://img.shields.io/npm/v/@felte/vue)](https://www.npmjs.com/package/@felte/vanilla)
[![codecov](https://codecov.io/gh/pablo-abc/felte/branch/main/graph/badge.svg?token=T73OJZ50LC)](https://codecov.io/gh/pablo-abc/felte)

Felte is an extensible form library originally built for Svelte but now supporting VueJS with the help of this package. Felte, on its most simple form, only requires you to set a directive (`v-form`) on the form you want it to manage. No custom `Field` or `Form` components are needed, making custom styles really easy to do.

## Features

- Single directive to make your form reactive.
- Use HTML5 native elements to create your form. (Only the `name` attribute is necessary).
- Provides stores and helper functions to handle more complex use cases.
- No assumptions on your validation strategy. Use any validation library you want or write your own strategy.
- Handles addition and removal of form controls during runtime.
- Well tested. Currently at [99% code coverage](https://app.codecov.io/gh/pablo-abc/felte) and constantly working on improving test quality.
- Supports validation with [yup](/packages/validator-yup/README.md), [zod](/packages/validator-zod/README.md) and [superstruct](/packages/validator-superstruct/README.md).
- Easily [extend its functionality](https://felte.dev/docs/svelte/extending-felte).

## Simple usage example

```html
<script setup>
  // inside some Vue SFC file
  import { useForm } from '@felte/vue';

  const { vForm } = useForm({
    onSubmit: (values) => console.log(values);
  });
</script>
<template>
  <form v-form>
    <input type="text" name="email" />
    <input type="password" name="password" />
    <input type="submit" value="Sign in" />
  </form>
</template>
```

## Installation

```sh
npm install --save @felte/vue

# Or, if you use yarn

yarn add @felte/vue
```

## Usage

This package does not have documentation _yet_ but. The API is really similar to that of other packages, mainly the ones returning "accessors" such as the react/preact/solid ones. The main differences are:

- It doesn't return a `form` action, but a `vForm` object that should be used as a custom directive. (In `<script setup>` it's enough to destructure it from the response and use it as `v-form` in your form).
- It doesn't return observables but accessors. These accessors, when called, return reactive `ref`s (objects containing a reactive `value` property).

You can check the [official documentation for Solid](https://felte.dev/docs/solid/getting-started) to have an idea on how to accessors _may_ look like. Or take a look at the [example in this repo](../../examples/vue/basic).
npm package: @felthy/css-vendor
Description: CSS vendor prefix detection and property feature testing.
Author: Oleg Slobodskoi
Latest version: 2.0.2
Deprecated: This fork is deprecated, use official release css-vendor@^2.0.2 instead

[![Build Status](https://travis-ci.org/cssinjs/css-vendor.svg?branch=master)](https://travis-ci.org/cssinjs/css-vendor) [![Greenkeeper badge](https://badges.greenkeeper.io/cssinjs/css-vendor.svg)](https://greenkeeper.io/)

## CSS vendor prefix detection and property feature testing.

### Vendor prefixes

```javascript
console.log(cssVendor.prefix.js) // e.g. WebkitTransform

console.log(cssVendor.prefix.css) // e.g. -webkit-transform
```

### Property support feature test

`cssVendor.supportedProperty(prop)`

Test if property is supported, returns false if not. Returns string if supported. May add a vendor prefix if needed.

```javascript
console.log(cssVendor.supportedProperty('animation')) // e.g. -webkit-animation
```

### Value support feature test

`cssVendor.supportedValue(prop, value)`

Test if value is supported, returns false if not. Returns string if supported. May add a vendor prefix if needed.

```javascript
console.log(cssVendor.supportedValue('display', 'flex')) // e.g. -webkit-flex
```

## Run tests

```bash
yarn
yarn test
```

## License

MIT
npm package: @felthy/jss
Description: A lib for generating Style Sheets with JavaScript.
Author: JSS Team
Latest version: 10.0.0-alpha.26

# jss

[![Version](https://img.shields.io/npm/v/jss.svg?style=flat)](https://npmjs.org/package/jss)
[![License](https://img.shields.io/npm/l/jss.svg?style=flat)](https://github.com/cssinjs/jss/blob/master/LICENSE)
[![Downlodas](https://img.shields.io/npm/dm/jss.svg?style=flat)](https://npmjs.org/package/jss)
[![Size](https://img.shields.io/bundlephobia/minzip/jss.svg?style=flat)](https://npmjs.org/package/jss)
[![Dependencies](https://img.shields.io/david/cssinjs/jss.svg?path=packages%2Fjss&style=flat)](https://npmjs.org/package/jss)
[![Gitter](https://badges.gitter.im/JoinChat.svg)](https://gitter.im/cssinjs/lobby)

> A lib for generating Style Sheets with JavaScript.

See our website [jss](https://cssinjs.org/setup?v=v10.0.0-alpha.24) for more information.

## Install

Using npm:

```sh
npm install jss
```

or using yarn:

```sh
yarn add jss
```
npm package: @felthy/react-jss
Description: JSS integration with React
Author: JSS Team
Latest version: 10.0.4

# react-jss

[![Version](https://img.shields.io/npm/v/react-jss.svg?style=flat)](https://npmjs.org/package/react-jss)
[![License](https://img.shields.io/npm/l/react-jss.svg?style=flat)](https://github.com/cssinjs/jss/blob/master/LICENSE)
[![Downlodas](https://img.shields.io/npm/dm/react-jss.svg?style=flat)](https://npmjs.org/package/react-jss)
[![Size](https://img.shields.io/bundlephobia/minzip/react-jss.svg?style=flat)](https://npmjs.org/package/react-jss)
[![Dependencies](https://img.shields.io/david/cssinjs/jss.svg?path=packages%2Freact-jss&style=flat)](https://npmjs.org/package/react-jss)
[![Gitter](https://badges.gitter.im/JoinChat.svg)](https://gitter.im/cssinjs/lobby)

> JSS integration with React

See our website [react-jss](https://cssinjs.org/react-jss?v=v10.0.4) for more information.

## Install

Using npm:

```sh
npm install react-jss
```

or using yarn:

```sh
yarn add react-jss
```