New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@felte/element

Package Overview
Dependencies
Maintainers
1
Versions
30
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@felte/element - npm Package Compare versions

Comparing version 0.2.2 to 0.2.3

dist/felte-field.js
dist/felte-field.js.map
dist/felte-field.min.js
dist/felte-field.min.js.map
dist/felte-form.js
dist/felte-form.js.map
dist/felte-form.min.js
dist/felte-form.min.js.map
dist/index.js
dist/index.js.map
dist/index.min.js
dist/index.min.js.map

21

dist/types/felte-field.d.ts

@@ -1,4 +0,10 @@

import { PropertyValues, LitElement } from 'lit';
import { FieldValue } from '@felte/core';
declare class FelteField<Value extends FieldValue = FieldValue> extends LitElement {
declare class FelteField<Value extends FieldValue = FieldValue> extends HTMLElement {
[key: string]: unknown;
static get observedAttributes(): string[];
static get attributeMap(): Record<string, {
converter: (v: any) => any;
name: string;
}>;
attributeChangedCallback(name: string, oldValue: any, newValue: any): void;
name?: string;

@@ -9,7 +15,8 @@ touchOnChange: boolean;

blurEvent: string;
value?: Value;
private _value?;
set value(newValue: Value);
get value(): Value;
private _onInput?;
private _onBlur;
blur(): void;
_assignedElements: HTMLElement[];
private _destroy?;

@@ -19,6 +26,6 @@ private _ready;

onfeltefieldready?(): void;
firstUpdated(): void;
updated(changed: PropertyValues<this>): void;
private _fieldElement?;
private _createField;
connectedCallback(): void;
disconnectedCallback(): void;
render(): import("lit").TemplateResult<1>;
}

@@ -25,0 +32,0 @@ declare global {

21

dist/types/felte-field.min.d.ts

@@ -1,4 +0,10 @@

import { PropertyValues, LitElement } from 'lit';
import { FieldValue } from '@felte/core';
declare class FelteField<Value extends FieldValue = FieldValue> extends LitElement {
declare class FelteField<Value extends FieldValue = FieldValue> extends HTMLElement {
[key: string]: unknown;
static get observedAttributes(): string[];
static get attributeMap(): Record<string, {
converter: (v: any) => any;
name: string;
}>;
attributeChangedCallback(name: string, oldValue: any, newValue: any): void;
name?: string;

@@ -9,7 +15,8 @@ touchOnChange: boolean;

blurEvent: string;
value?: Value;
private _value?;
set value(newValue: Value);
get value(): Value;
private _onInput?;
private _onBlur;
blur(): void;
_assignedElements: HTMLElement[];
private _destroy?;

@@ -19,6 +26,6 @@ private _ready;

onfeltefieldready?(): void;
firstUpdated(): void;
updated(changed: PropertyValues<this>): void;
private _fieldElement?;
private _createField;
connectedCallback(): void;
disconnectedCallback(): void;
render(): import("lit").TemplateResult<1>;
}

@@ -25,0 +32,0 @@ declare global {

23

dist/types/felte-form.d.ts

@@ -1,8 +0,6 @@

import { PropertyValues, LitElement } from 'lit';
import { Obj, FormConfig, Keyed, Errors, Touched, Helpers, Form, Paths, FieldsSetter, ObjectSetter } from '@felte/core';
declare function prepareForm<Data extends Obj = any>(id: string, config: FormConfig<Data>): Promise<HTMLFelteFormElement>;
declare class FelteForm<Data extends Obj = any> extends LitElement {
declare class FelteForm<Data extends Obj = any> extends HTMLElement {
[key: string]: unknown;
id: string;
_configuration: FormConfig<Data>;
private _configuration;
setConfiguration(config: FormConfig<Data>): void;

@@ -50,9 +48,11 @@ elements?: HTMLFormElement['elements'];

validate: Helpers<Data, Paths<Data>>['validate'];
formElements: HTMLFormElement[];
private _formElement;
private _destroy?;
private _createForm;
willUpdate(): void;
updated(changed: PropertyValues<this>): void;
private _onChildChange;
private _observer?;
connectedCallback(): void;
disconnectedCallback(): void;
render(): import("lit").TemplateResult<1>;
static get observedAttributes(): string[];
attributeChangedCallback(name: string, oldValue: any, newValue: any): void;
}

@@ -64,11 +64,6 @@ declare global {

type HTMLFelteFormElement<Data extends Obj = any> = FelteForm<Data>;
interface Window {
__FELTE__: {
configs: Record<string, FormConfig<any>>;
};
}
}
export { FelteSubmitError } from '@felte/core';
export type { FelteSubmitEvent, FelteErrorEvent, FelteSuccessEvent } from '@felte/core';
export { prepareForm, FelteForm };
export { FelteForm };
//# sourceMappingURL=felte-form.d.ts.map

23

dist/types/felte-form.min.d.ts

@@ -1,8 +0,6 @@

import { PropertyValues, LitElement } from 'lit';
import { Obj, FormConfig, Keyed, Errors, Touched, Helpers, Form, Paths, FieldsSetter, ObjectSetter } from '@felte/core';
declare function prepareForm<Data extends Obj = any>(id: string, config: FormConfig<Data>): Promise<HTMLFelteFormElement>;
declare class FelteForm<Data extends Obj = any> extends LitElement {
declare class FelteForm<Data extends Obj = any> extends HTMLElement {
[key: string]: unknown;
id: string;
_configuration: FormConfig<Data>;
private _configuration;
setConfiguration(config: FormConfig<Data>): void;

@@ -50,9 +48,11 @@ elements?: HTMLFormElement['elements'];

validate: Helpers<Data, Paths<Data>>['validate'];
formElements: HTMLFormElement[];
private _formElement;
private _destroy?;
private _createForm;
willUpdate(): void;
updated(changed: PropertyValues<this>): void;
private _onChildChange;
private _observer?;
connectedCallback(): void;
disconnectedCallback(): void;
render(): import("lit").TemplateResult<1>;
static get observedAttributes(): string[];
attributeChangedCallback(name: string, oldValue: any, newValue: any): void;
}

@@ -64,11 +64,6 @@ declare global {

type HTMLFelteFormElement<Data extends Obj = any> = FelteForm<Data>;
interface Window {
__FELTE__: {
configs: Record<string, FormConfig<any>>;
};
}
}
export { FelteSubmitError } from '@felte/core';
export type { FelteSubmitEvent, FelteErrorEvent, FelteSuccessEvent } from '@felte/core';
export { prepareForm, FelteForm };
export { FelteForm };
//# sourceMappingURL=felte-form.min.d.ts.map

44

dist/types/index.d.ts

@@ -1,4 +0,10 @@

import { PropertyValues, LitElement } from "lit";
import { FieldValue, Obj, FormConfig, Keyed, Errors, Touched, Helpers, Form, Paths, FieldsSetter, ObjectSetter } from "@felte/core";
declare class FelteField<Value extends FieldValue = FieldValue> extends LitElement {
declare class FelteField<Value extends FieldValue = FieldValue> extends HTMLElement {
[key: string]: unknown;
static get observedAttributes(): string[];
static get attributeMap(): Record<string, {
converter: (v: any) => any;
name: string;
}>;
attributeChangedCallback(name: string, oldValue: any, newValue: any): void;
name?: string;

@@ -9,7 +15,8 @@ touchOnChange: boolean;

blurEvent: string;
value?: Value;
private _value?;
set value(newValue: Value);
get value(): Value;
private _onInput?;
private _onBlur;
blur(): void;
_assignedElements: HTMLElement[];
private _destroy?;

@@ -19,6 +26,6 @@ private _ready;

onfeltefieldready?(): void;
firstUpdated(): void;
updated(changed: PropertyValues<this>): void;
private _fieldElement?;
private _createField;
connectedCallback(): void;
disconnectedCallback(): void;
render(): import("lit").TemplateResult<1>;
}

@@ -31,7 +38,6 @@ declare global {

}
declare function prepareForm<Data extends Obj = any>(id: string, config: FormConfig<Data>): Promise<HTMLFelteFormElement>;
declare class FelteForm<Data extends Obj = any> extends LitElement {
declare class FelteForm<Data extends Obj = any> extends HTMLElement {
[key: string]: unknown;
id: string;
_configuration: FormConfig<Data>;
private _configuration;
setConfiguration(config: FormConfig<Data>): void;

@@ -80,9 +86,11 @@ elements?: HTMLFormElement["elements"];

validate: Helpers<Data, Paths<Data>>["validate"];
formElements: HTMLFormElement[];
private _formElement;
private _destroy?;
private _createForm;
willUpdate(): void;
updated(changed: PropertyValues<this>): void;
private _onChildChange;
private _observer?;
connectedCallback(): void;
disconnectedCallback(): void;
render(): import("lit").TemplateResult<1>;
static get observedAttributes(): string[];
attributeChangedCallback(name: string, oldValue: any, newValue: any): void;
}

@@ -94,11 +102,7 @@ declare global {

type HTMLFelteFormElement<Data extends Obj = any> = FelteForm<Data>;
interface Window {
__FELTE__: {
configs: Record<string, FormConfig<any>>;
};
}
}
export { FelteField, prepareForm, FelteForm };
declare function prepareForm<Data extends Obj = any>(id: string, config: FormConfig<Data>): Promise<HTMLFelteFormElement>;
export { FelteField, FelteForm, prepareForm };
export { FelteSubmitError } from "@felte/core";
export type { FelteSubmitEvent, FelteErrorEvent, FelteSuccessEvent } from "@felte/core";
//# sourceMappingURL=index.d.ts.map

44

dist/types/index.min.d.ts

@@ -1,4 +0,10 @@

import { PropertyValues, LitElement } from "lit";
import { FieldValue, Obj, FormConfig, Keyed, Errors, Touched, Helpers, Form, Paths, FieldsSetter, ObjectSetter } from "@felte/core";
declare class FelteField<Value extends FieldValue = FieldValue> extends LitElement {
declare class FelteField<Value extends FieldValue = FieldValue> extends HTMLElement {
[key: string]: unknown;
static get observedAttributes(): string[];
static get attributeMap(): Record<string, {
converter: (v: any) => any;
name: string;
}>;
attributeChangedCallback(name: string, oldValue: any, newValue: any): void;
name?: string;

@@ -9,7 +15,8 @@ touchOnChange: boolean;

blurEvent: string;
value?: Value;
private _value?;
set value(newValue: Value);
get value(): Value;
private _onInput?;
private _onBlur;
blur(): void;
_assignedElements: HTMLElement[];
private _destroy?;

@@ -19,6 +26,6 @@ private _ready;

onfeltefieldready?(): void;
firstUpdated(): void;
updated(changed: PropertyValues<this>): void;
private _fieldElement?;
private _createField;
connectedCallback(): void;
disconnectedCallback(): void;
render(): import("lit").TemplateResult<1>;
}

@@ -31,7 +38,6 @@ declare global {

}
declare function prepareForm<Data extends Obj = any>(id: string, config: FormConfig<Data>): Promise<HTMLFelteFormElement>;
declare class FelteForm<Data extends Obj = any> extends LitElement {
declare class FelteForm<Data extends Obj = any> extends HTMLElement {
[key: string]: unknown;
id: string;
_configuration: FormConfig<Data>;
private _configuration;
setConfiguration(config: FormConfig<Data>): void;

@@ -80,9 +86,11 @@ elements?: HTMLFormElement["elements"];

validate: Helpers<Data, Paths<Data>>["validate"];
formElements: HTMLFormElement[];
private _formElement;
private _destroy?;
private _createForm;
willUpdate(): void;
updated(changed: PropertyValues<this>): void;
private _onChildChange;
private _observer?;
connectedCallback(): void;
disconnectedCallback(): void;
render(): import("lit").TemplateResult<1>;
static get observedAttributes(): string[];
attributeChangedCallback(name: string, oldValue: any, newValue: any): void;
}

@@ -94,11 +102,7 @@ declare global {

type HTMLFelteFormElement<Data extends Obj = any> = FelteForm<Data>;
interface Window {
__FELTE__: {
configs: Record<string, FormConfig<any>>;
};
}
}
export { FelteField, prepareForm, FelteForm };
declare function prepareForm<Data extends Obj = any>(id: string, config: FormConfig<Data>): Promise<HTMLFelteFormElement>;
export { FelteField, FelteForm, prepareForm };
export { FelteSubmitError } from "@felte/core";
export type { FelteSubmitEvent, FelteErrorEvent, FelteSuccessEvent } from "@felte/core";
//# sourceMappingURL=index.min.d.ts.map

34

package.json
{
"name": "@felte/element",
"version": "0.2.2",
"version": "0.2.3",
"description": "An extensible form library that can be used as a custom element",
"main": "dist/index.cjs",
"module": "dist/esm/index.js",
"browser": "dist/esm/index.js",
"main": "dist/index.js",
"module": "dist/index.js",
"browser": "dist/index.js",
"types": "dist/types/index.d.ts",

@@ -21,2 +21,5 @@ "type": "module",

],
"files": [
"dist"
],
"devDependencies": {

@@ -27,4 +30,3 @@ "tslib": "^2.3.1",

"dependencies": {
"@felte/core": "1.1.1",
"lit": "^2.2.0"
"@felte/core": "1.1.1"
},

@@ -35,17 +37,5 @@ "publishConfig": {

"exports": {
".": {
"import": "./dist/esm/index.js",
"require": "./dist/index.cjs",
"default": "./dist/esm/index.js"
},
"./dist/esm/felte-form": {
"import": "./dist/esm/felte-form.js",
"require": "./dist/felte-form.cjs",
"default": "./dist/esm/felte-form.js"
},
"./dist/esm/felte-field": {
"import": "./dist/esm/felte-field.js",
"require": "./dist/felte-field.cjs",
"default": "./dist/esm/felte-field.js"
},
".": "./dist/index.js",
"./dist/felte-form": "./dist/felte-form.js",
"./dist/felte-field": "./dist/felte-field.js",
"./package.json": "./package.json"

@@ -60,3 +50,3 @@ },

},
"readme": "# Felte: A form library for vanilla JS (web component)\n\n[![Tests](https://github.com/pablo-abc/felte/workflows/Tests/badge.svg)](https://github.com/pablo-abc/felte/actions/workflows/test.yml)\n[![Bundle size](https://img.shields.io/bundlephobia/min/@felte/element)](https://bundlephobia.com/result?p=@felte/element)\n[![NPM Version](https://img.shields.io/npm/v/@felte/element)](https://www.npmjs.com/package/@felte/element)\n[![NPM Downloads](https://img.shields.io/npm/dw/@felte/element)](https://www.npmjs.com/package/@felte/element)\n[![codecov](https://codecov.io/gh/pablo-abc/felte/branch/main/graph/badge.svg?token=T73OJZ50LC)](https://codecov.io/gh/pablo-abc/felte)\n\nFelte is an extensible form library originally bult for Svelte. This package aims to provide Felte's functionality using a custom element. Felte, on its most simple form, only requires you to provide a `<form>` element to it in order to work.\n\n> **WARNING**: This package is under development, things might break on updates and documentation is almost non-existent besides this README.\n\n## Features\n\n- Single action to make your form reactive.\n- Use HTML5 native elements to create your form. (Only the `name` attribute is necessary).\n- Provides stores and helper functions to handle more complex use cases.\n- No assumptions on your validation strategy. Use any validation library you want or write your own strategy.\n- Handles addition and removal of form controls during runtime.\n- Official solutions for error reporting using `reporter` packages.\n- Well tested. Currently at [99% code coverage](https://app.codecov.io/gh/pablo-abc/felte) and constantly working on improving test quality.\n- Supports validation with [yup](/packages/validator-yup/README.md), [zod](/packages/validator-zod/README.md) and [superstruct](/packages/validator-superstruct/README.md).\n- Easily [extend its functionality](https://felte.dev/docs/element/extending-felte).\n\n## Simple usage example\n\nUsing Svelte as an example:\n\n```html\n<script type=\"module\">\n import { prepareForm } from '@felte/element';\n\n prepareForm('signin', {\n onSubmit: async (values) => {\n /* call to an api */\n },\n });\n</script>\n\n<felte-form id=\"signin\">\n <form>\n <input type=\"text\" name=\"email\" />\n <input type=\"password\" name=\"password\" />\n <input type=\"submit\" value=\"Sign in\" />\n </form>\n</felte-form>\n```\n\n## Installation\n\n```sh\nnpm install --save @felte/element\n\n# Or if you use yarn\n\nyarn add @felte/element\n```\n\n## Usage\n\nTo learn more about how to use `felte` to handle your forms, check the [official documentation](https://felte.dev/docs/element/getting-started). **TODO**: Add documentation\n\n## Framework compatibility\n\nThis package should work nicely with any framework. Specially if you're using the `prepareForm` method of creating your form. It also works really nice with frameworks that set attributes as properties or frameworks that provide syntax to set values to properties of elements instead of attributes.\n"
"readme": "# Felte: A form library for vanilla JS (custom element)\n\n[![Tests](https://github.com/pablo-abc/felte/workflows/Tests/badge.svg)](https://github.com/pablo-abc/felte/actions/workflows/test.yml)\n[![Bundle size](https://img.shields.io/bundlephobia/min/@felte/element)](https://bundlephobia.com/result?p=@felte/element)\n[![NPM Version](https://img.shields.io/npm/v/@felte/element)](https://www.npmjs.com/package/@felte/element)\n[![NPM Downloads](https://img.shields.io/npm/dw/@felte/element)](https://www.npmjs.com/package/@felte/element)\n[![codecov](https://codecov.io/gh/pablo-abc/felte/branch/main/graph/badge.svg?token=T73OJZ50LC)](https://codecov.io/gh/pablo-abc/felte)\n\nFelte is an extensible form library originally bult for Svelte. This package aims to provide Felte's functionality using a custom element. Felte, on its most simple form, only requires you to provide a `<form>` element to it in order to work.\n\n> **WARNING**: This package is under development, things might break on updates and documentation is almost non-existent besides this README.\n\n## Features\n\n- Single action to make your form reactive.\n- Use HTML5 native elements to create your form. (Only the `name` attribute is necessary).\n- Provides stores and helper functions to handle more complex use cases.\n- No assumptions on your validation strategy. Use any validation library you want or write your own strategy.\n- Handles addition and removal of form controls during runtime.\n- Official solutions for error reporting using `reporter` packages.\n- Well tested. Currently at [99% code coverage](https://app.codecov.io/gh/pablo-abc/felte) and constantly working on improving test quality.\n- Supports validation with [yup](/packages/validator-yup/README.md), [zod](/packages/validator-zod/README.md) and [superstruct](/packages/validator-superstruct/README.md).\n- Easily [extend its functionality](https://felte.dev/docs/element/extending-felte).\n\n## Simple usage example\n\nUsing Svelte as an example:\n\n```html\n<script type=\"module\">\n import { prepareForm } from '@felte/element';\n\n prepareForm('signin', {\n onSubmit: async (values) => {\n /* call to an api */\n },\n });\n</script>\n\n<felte-form id=\"signin\">\n <form>\n <input type=\"text\" name=\"email\" />\n <input type=\"password\" name=\"password\" />\n <input type=\"submit\" value=\"Sign in\" />\n </form>\n</felte-form>\n```\n\n## Installation\n\n```sh\nnpm install --save @felte/element\n\n# Or if you use yarn\n\nyarn add @felte/element\n```\n\n## Usage\n\nTo learn more about how to use `felte` to handle your forms, check the [official documentation](https://felte.dev/docs/element/getting-started). **TODO**: Add documentation\n\n## Framework compatibility\n\nThis package should work nicely with any framework. Specially if you're using the `prepareForm` method of creating your form. It also works really nice with frameworks that set attributes as properties or frameworks that provide syntax to set values to properties of elements instead of attributes.\n"
}

2

README.md

@@ -1,2 +0,2 @@

# Felte: A form library for vanilla JS (web component)
# Felte: A form library for vanilla JS (custom element)

@@ -3,0 +3,0 @@ [![Tests](https://github.com/pablo-abc/felte/workflows/Tests/badge.svg)](https://github.com/pablo-abc/felte/actions/workflows/test.yml)

.nyc_output/d2bffbc5-3bdf-4155-89b8-3fc33a1f14f3.json
.nyc_output/e963020f-01c5-4131-bfca-187f157c9cd4.json
.nyc_output/processinfo/d2bffbc5-3bdf-4155-89b8-3fc33a1f14f3.json
.nyc_output/processinfo/e963020f-01c5-4131-bfca-187f157c9cd4.json
.nyc_output/processinfo/index.json
CHANGELOG.md
coverage/clover.xml
coverage/coverage-final.json
coverage/lcov-report/base.css
coverage/lcov-report/block-navigation.js
coverage/lcov-report/favicon.png
coverage/lcov-report/felte-field.ts.html
coverage/lcov-report/felte-form.ts.html
coverage/lcov-report/index.html
coverage/lcov-report/index.ts.html
coverage/lcov-report/prettify.css
coverage/lcov-report/prettify.js
coverage/lcov-report/reporter.ts.html
coverage/lcov-report/sort-arrow-sprite.png
coverage/lcov-report/sorter.js
coverage/lcov-report/stores.ts.html
coverage/lcov-report/validation-message.ts.html
coverage/lcov.info
dist/esm/felte-field.js
dist/esm/felte-field.js.map
dist/esm/felte-field.min.js
dist/esm/felte-field.min.js.map
dist/esm/felte-form.js
dist/esm/felte-form.js.map
dist/esm/felte-form.min.js
dist/esm/felte-form.min.js.map
dist/esm/index.js
dist/esm/index.js.map
dist/esm/index.min.js
dist/esm/index.min.js.map
dist/felte-field.cjs
dist/felte-field.cjs.map
dist/felte-form.cjs
dist/felte-form.cjs.map
dist/index.cjs
dist/index.cjs.map
dist/types/felte-field.cjs.d.ts
dist/types/felte-field.cjs.d.ts.map
dist/types/felte-form.cjs.d.ts
dist/types/felte-form.cjs.d.ts.map
dist/types/index.cjs.d.ts
dist/types/index.cjs.d.ts.map
rollup.config.js
src/felte-field.ts
src/felte-form.ts
src/index.ts
src/stores.ts
tests/common.ts
tests/felte-field.spec.ts
tests/felte-form.spec.ts
tsconfig.json
dist/types/felte-field.d.ts.map

Sorry, the diff of this file is not supported yet

dist/types/felte-field.min.d.ts.map

Sorry, the diff of this file is not supported yet

dist/types/felte-form.d.ts.map

Sorry, the diff of this file is not supported yet

dist/types/felte-form.min.d.ts.map

Sorry, the diff of this file is not supported yet

dist/types/index.d.ts.map

Sorry, the diff of this file is not supported yet

dist/types/index.min.d.ts.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc