@keysdown/form-wrapper 0.0.4 → 0.0.6

package/README.md

@@ -17,7 +17,6 @@ npm install @keysdown/form-wrapper --save
 Basic example using Vue.
 
 ```vue
-
 <template>
   <form @submit.prevent="submit">
     <input type="text" v-model="form.first_name"/>
@@ -30,9 +29,9 @@ Basic example using Vue.
 <script setup lang="ts">
   import axios from 'axios'
   import {ref} from 'vue'
-  import Form from '@keysdown/form-wrapper'
+  import {createForm} from '@keysdown/form-wrapper'
 
-  const form = ref(Form({
+  const form = ref(createForm({
     first_name: null,
     last_name: null,
     username: null
@@ -73,9 +72,9 @@ Basic example with validation using Vue.
 <script setup lang="ts">
   import axios from 'axios'
   import {ref} from 'vue'
-  import Form from '@keysdown/form-wrapper'
+  import {createForm} from '@keysdown/form-wrapper'
 
-  const form = ref(Form({
+  const form = ref(createForm({
     first_name: {
       value: null,
       rules: ['required'],
@@ -179,7 +178,7 @@ form.addFields({
 Method used when you want to fill in several form fields at once.
 
 ```js
-const form = Form({
+const form = createForm({
     username: null
 })
 
@@ -197,7 +196,7 @@ console.log(form.values()) // {username: 'keysdown'}
 Method used when you want to remove a field from the form.
 
 ```js
-const form = Form({
+const form = createForm({
     username: null
 })
 
@@ -213,7 +212,7 @@ console.log(form.values()) // {}
 Method used to remove multiple fields to the form.
 
 ```js
-const form = Form({
+const form = createForm({
     username: null
 })
 
@@ -229,7 +228,7 @@ console.log(form.values()) // {}
 Method used to reset all form values to original state.
 
 ```js
-const form = Form({
+const form = createForm({
     username: null
 })
 
@@ -247,7 +246,7 @@ console.log(form.values()) // {username: null}
 Method used to change the form loading state.
 
 ```js
-const form = Form({
+const form = createForm({
     username: null
 })
 
@@ -267,7 +266,7 @@ console.log(form.awaiting) // false
 Method used to validate the entire form or a specific field.
 
 ```js
- const form = Form({
+ const form = createForm({
     username: {
         value: null,
         rules: ['required'],
@@ -301,7 +300,7 @@ form.validate()
 Method used to validate a specific field.
 
 ```js
- const form = Form({
+ const form = createForm({
     username: {
         value: null,
         rules: ['required'],
@@ -335,7 +334,7 @@ form.validate('username')
 Method used to validate the entire form.
 
 ```js
- const form = Form({
+ const form = createForm({
     username: {
         value: null,
         rules: ['required'],
@@ -371,7 +370,7 @@ form.validate()
 Method used to access all form values in json format.
 
 ```js
- const form = Form({
+ const form = createForm({
     username: null
 })
 
@@ -385,7 +384,7 @@ axios.post('some-api', form.values())
 Method used to access all form values as form data.
 
 ```js
- const form = Form({
+ const form = createForm({
     username: null
 })
 

package/dist/core/Form.d.ts

@@ -1,6 +1,6 @@
-import { Field, Fields, RawFields } from '../types/fields.ts';
-import { Values } from '../types/values.ts';
-import { Validation } from './Validation.ts';
+import { Field, Fields, RawFields } from '../types/fields';
+import { Values } from '../types/values';
+import { Validation } from './Validation';
 export declare class Form {
     [key: string]: any;
     awaiting: boolean;
@@ -9,15 +9,15 @@ export declare class Form {
     constructor(fields: Fields | RawFields);
     addField(field: string, value: Field): this;
     addFields(fields: Fields | RawFields): this;
-    get errors(): import('./Errors.ts').Errors;
+    get errors(): import('./Errors').Errors;
     fill(data: {
         [key: string]: any;
     }, updateOriginalValues?: boolean): this;
-    get messages(): import('./Messages.ts').Messages;
+    get messages(): import('./Messages').Messages;
     removeField(field: string): this;
     removeFields(fields: string[]): this;
     reset(): this;
-    get rules(): import('./Rules.ts').Rules;
+    get rules(): import('./Rules').Rules;
     setAwaiting(awaiting?: boolean): this;
     validate(field?: string | null): Promise<this | void>;
     validateField(field: string): Promise<void>;

package/dist/core/Messages.d.ts

@@ -1,4 +1,4 @@
 import { Collection } from '../utils/collections';
-import { ErrorMessage } from '../types/messages.ts';
+import { ErrorMessage } from '../types/messages';
 export declare class Messages extends Collection<ErrorMessage> {
 }

package/dist/core/Validation.d.ts

@@ -1,6 +1,6 @@
-import { Messages } from './Messages.ts';
-import { Rules } from './Rules.ts';
-import { Errors } from './Errors.ts';
+import { Messages } from './Messages';
+import { Rules } from './Rules';
+import { Errors } from './Errors';
 export declare class Validation {
     errors: Errors;
     messages: Messages;

package/dist/form-wrapper.cjs

@@ -0,0 +1 @@
+"use strict";var m=Object.defineProperty;var F=(s,t,e)=>t in s?m(s,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):s[t]=e;var a=(s,t,e)=>F(s,typeof t!="symbol"?t+"":t,e);Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=s=>typeof s=="string"?s.split("|"):s,b=s=>{var t,e;return{validation:{rules:(t=s.validation)!=null&&t.rules?p(s.validation.rules):[],messages:((e=s.validation)==null?void 0:e.messages)||{}},value:s.value||null}};class u{constructor(){a(this,"collection",{})}all(){return this.collection}first(t){const e=this.get(t);return e?Array.isArray(e)?e[0]:e:null}any(){return Object.keys(this.collection).length>0}fill(t){return this.collection=t,this}push(t,e){return this.collection={...this.collection,[t]:e},this}has(t){return this.collection.hasOwnProperty(t)}get(t,e=null){return this.has(t)?this.collection[t]:e}unset(t){return this.has(t)&&delete this.collection[t],this}clear(){return this.collection={},this}}class j extends u{}class y extends u{}class f extends u{push(t,e){const r=this.get(t)||[];return this.collection={...this.collection,[t]:[...r,e]},this}get(t){return super.get(t,[])}}class w{constructor(){a(this,"errors",new f);a(this,"messages",new j);a(this,"rules",new y)}}const O=s=>new Promise((t,e)=>{s==null&&e(),String(s).replace(/\s/g,"").length>0?t(s):e()}),h={required:O},P=s=>s!==null&&typeof s=="object"&&!Array.isArray(s),c=(s,t,e=null)=>{const r=t||new FormData;return Object.keys(s).forEach(i=>{const n=s[i];if(i=e?`${e}[${i}]`:i,!([void 0,null].indexOf(n)>-1)){if(P(n)&&!(n instanceof File)||Array.isArray(n)){c(n,r,i);return}r.append(i,n)}}),r};class d{constructor(t){a(this,"awaiting",!1);a(this,"originalValues",{});a(this,"validation",new w);this.addFields(t)}addField(t,e){if(typeof e=="object"&&"value"in e){const r=b(e);this[t]=r.value,this.originalValues[t]=r.value,this.validation.messages.push(t,r.validation.messages),this.validation.rules.push(t,r.validation.rules)}else this[t]=e,this.originalValues[t]=e;return this}addFields(t){return Object.keys(t).forEach(e=>{this.addField(e,t[e])}),this}get errors(){return this.validation.errors}fill(t,e=!1){return Object.keys(t).forEach(r=>{let i=t[r];e&&(this.originalValues[r]=i),this[r]=i}),this}get messages(){return this.validation.messages}removeField(t){return delete this[t],delete this.originalValues[t],this.validation.messages.unset(t),this.validation.rules.unset(t),this}removeFields(t){return t.forEach(e=>{this.removeField(e)}),this}reset(){return this.validation.errors.clear(),Object.keys(this.originalValues).forEach(t=>{this[t]=this.originalValues[t]}),this}get rules(){return this.validation.rules}setAwaiting(t=!0){return this.awaiting=t,this}validate(t=null){return t?this.validateField(t):this.validateForm()}validateField(t){this.validation.errors.unset(t);const e=this.validation.rules.get(t);if(e&&e.length>0){const r=e.map(i=>{const n=i.split(":"),l=n[0],g=n.length===2?n[1].split(","):[];return l in h?h[l](this[t],g).catch(v=>{const o=this.validation.messages.get(t);return o&&l in o&&this.validation.errors.push(t,o[l]),Promise.reject(v)}):Promise.reject(new Error(`There is no validation rule called "${i}"`))});return Promise.all(r).then(()=>{})}return Promise.resolve()}validateForm(){const t=Object.keys(this.originalValues).map(e=>this.validateField(e));return Promise.all(t).then(()=>Promise.resolve(this)).catch(()=>Promise.reject(this))}values(){const t={};return Object.keys(this.originalValues).forEach(e=>{t[e]=this[e]}),t}valuesAsFormData(){return c(this.values())}}const V=s=>new d(s);exports.createForm=V;exports.default=d;

package/dist/form-wrapper.d.ts

@@ -0,0 +1,6 @@
+export * from './main'
+export {}
+import FormWrapper from './main'
+export default FormWrapper
+export * from './main'
+export {}

package/dist/form-wrapper.iife.js

@@ -0,0 +1 @@
+var FormWrapper=function(n){"use strict";var P=Object.defineProperty;var V=(n,l,u)=>l in n?P(n,l,{enumerable:!0,configurable:!0,writable:!0,value:u}):n[l]=u;var o=(n,l,u)=>V(n,typeof l!="symbol"?l+"":l,u);const l=s=>typeof s=="string"?s.split("|"):s,u=s=>{var t,e;return{validation:{rules:(t=s.validation)!=null&&t.rules?l(s.validation.rules):[],messages:((e=s.validation)==null?void 0:e.messages)||{}},value:s.value||null}};class h{constructor(){o(this,"collection",{})}all(){return this.collection}first(t){const e=this.get(t);return e?Array.isArray(e)?e[0]:e:null}any(){return Object.keys(this.collection).length>0}fill(t){return this.collection=t,this}push(t,e){return this.collection={...this.collection,[t]:e},this}has(t){return this.collection.hasOwnProperty(t)}get(t,e=null){return this.has(t)?this.collection[t]:e}unset(t){return this.has(t)&&delete this.collection[t],this}clear(){return this.collection={},this}}class F extends h{}class p extends h{}class b extends h{push(t,e){const r=this.get(t)||[];return this.collection={...this.collection,[t]:[...r,e]},this}get(t){return super.get(t,[])}}class j{constructor(){o(this,"errors",new b);o(this,"messages",new F);o(this,"rules",new p)}}const g={required:s=>new Promise((t,e)=>{s==null&&e(),String(s).replace(/\s/g,"").length>0?t(s):e()})},f=s=>s!==null&&typeof s=="object"&&!Array.isArray(s),v=(s,t,e=null)=>{const r=t||new FormData;return Object.keys(s).forEach(i=>{const a=s[i];if(i=e?`${e}[${i}]`:i,!([void 0,null].indexOf(a)>-1)){if(f(a)&&!(a instanceof File)||Array.isArray(a)){v(a,r,i);return}r.append(i,a)}}),r};class m{constructor(t){o(this,"awaiting",!1);o(this,"originalValues",{});o(this,"validation",new j);this.addFields(t)}addField(t,e){if(typeof e=="object"&&"value"in e){const r=u(e);this[t]=r.value,this.originalValues[t]=r.value,this.validation.messages.push(t,r.validation.messages),this.validation.rules.push(t,r.validation.rules)}else this[t]=e,this.originalValues[t]=e;return this}addFields(t){return Object.keys(t).forEach(e=>{this.addField(e,t[e])}),this}get errors(){return this.validation.errors}fill(t,e=!1){return Object.keys(t).forEach(r=>{let i=t[r];e&&(this.originalValues[r]=i),this[r]=i}),this}get messages(){return this.validation.messages}removeField(t){return delete this[t],delete this.originalValues[t],this.validation.messages.unset(t),this.validation.rules.unset(t),this}removeFields(t){return t.forEach(e=>{this.removeField(e)}),this}reset(){return this.validation.errors.clear(),Object.keys(this.originalValues).forEach(t=>{this[t]=this.originalValues[t]}),this}get rules(){return this.validation.rules}setAwaiting(t=!0){return this.awaiting=t,this}validate(t=null){return t?this.validateField(t):this.validateForm()}validateField(t){this.validation.errors.unset(t);const e=this.validation.rules.get(t);if(e&&e.length>0){const r=e.map(i=>{const a=i.split(":"),c=a[0],w=a.length===2?a[1].split(","):[];return c in g?g[c](this[t],w).catch(O=>{const d=this.validation.messages.get(t);return d&&c in d&&this.validation.errors.push(t,d[c]),Promise.reject(O)}):Promise.reject(new Error(`There is no validation rule called "${i}"`))});return Promise.all(r).then(()=>{})}return Promise.resolve()}validateForm(){const t=Object.keys(this.originalValues).map(e=>this.validateField(e));return Promise.all(t).then(()=>Promise.resolve(this)).catch(()=>Promise.reject(this))}values(){const t={};return Object.keys(this.originalValues).forEach(e=>{t[e]=this[e]}),t}valuesAsFormData(){return v(this.values())}}const y=s=>new m(s);return n.createForm=y,n.default=m,Object.defineProperties(n,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}}),n}({});

package/dist/main.d.ts

@@ -1,4 +1,3 @@
-import { Form } from './core/Form.ts';
-declare const createForm: (data: any) => Form;
-export { createForm };
-export default Form;
+import { Form as FormWrapper } from './core/Form';
+export declare const createForm: (data: any) => FormWrapper;
+export default FormWrapper;

package/dist/utils/validations.d.ts

@@ -1,3 +1,3 @@
-import { Rules } from '../types/rules.ts';
+import { Rules } from '../types/rules';
 export declare const required: (value: string) => Promise<any>;
 export declare const Rule: Rules;

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@keysdown/form-wrapper",
-  "version": "0.0.4",
-  "description": "JavaScript wrapper for forms",
+  "version": "0.0.6",
   "type": "module",
   "files": [
-    "dist"
+    "dist/*"
   ],
-  "main": "./dist/form-wrapper.umd.js",
-  "module": "./dist/form-wrapper.es.js",
-  "types": "./dist/types/index.d.ts",
+  "main": "./dist/form-wrapper.umd.cjs",
+  "module": "./dist/form-wrapper.js",
+  "types": "./dist/form-wrapper.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/form-wrapper.es.js",
-      "require": "./dist/form-wrapper.umd.js"
+      "import": "./dist/form-wrapper.js",
+      "require": "./dist/form-wrapper.umd.cjs",
+      "types": "./dist/form-wrapper.d.ts"
     }
   },
   "scripts": {
@@ -21,6 +21,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
+    "@types/node": "^22.7.4",
     "typescript": "^5.5.3",
     "vite": "^5.4.1",
     "vite-plugin-dts": "^4.2.3"

package/dist/types/index.d.ts

@@ -1,6 +0,0 @@
-export * from '../main'
-export {}
-import FormWrapper from '../main'
-export default FormWrapper
-export * from '../main'
-export {}