@steveesamson/microform 1.0.8 → 1.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/form-action.d.ts +3 -3
  2. package/dist/form-action.js +8 -8
  3. package/dist/form-validators.d.ts +3 -3
  4. package/dist/form-validators.js +65 -41
  5. package/dist/index.d.ts +3 -3
  6. package/dist/index.js +3 -3
  7. package/dist/index.svelte.js +10 -8
  8. package/dist/types.d.ts +3 -3
  9. package/dist/types.js +1 -1
  10. package/dist/utils.d.ts +2 -2
  11. package/dist/utils.js +10 -11
  12. package/package.json +1 -1
package/dist/form-action.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { type Writable } from "svelte/store";
2
- import type { FormOptions, FormAction } from "./types.js";
3
- import type { Params } from "./internal.js";
1
+ import { type Writable } from 'svelte/store';
2
+ import type { FormOptions, FormAction } from './types.js';
3
+ import type { Params } from './internal.js';
4
4
  export declare const formAction: (values: Writable<Params>, errors: Writable<Params>, unfits: Writable<Params>, isdirty: Writable<boolean>, options: FormOptions, validationMap: Params) => FormAction;
package/dist/form-action.js CHANGED
@@ -1,13 +1,13 @@
1
- import { get } from "svelte/store";
2
- import { useValidator } from "./form-validators.js";
3
- import { getEditableContent } from "./utils.js";
1
+ import { get } from 'svelte/store';
2
+ import { useValidator } from './form-validators.js';
3
+ import { getEditableContent } from './utils.js';
4
4
  const isField = (node) => {
5
- return node instanceof HTMLSelectElement ||
5
+ return (node instanceof HTMLSelectElement ||
6
6
  node instanceof HTMLInputElement ||
7
- node instanceof HTMLTextAreaElement;
7
+ node instanceof HTMLTextAreaElement);
8
8
  };
9
9
  const isExcluded = (node) => {
10
- return node instanceof HTMLInputElement && ['radio', 'checkbox'].includes(node.type.toLowerCase());
10
+ return (node instanceof HTMLInputElement && ['radio', 'checkbox'].includes(node.type.toLowerCase()));
11
11
  };
12
12
  const isCheckbox = (node) => {
13
13
  return node instanceof HTMLInputElement && ['checkbox'].includes(node.type.toLowerCase());
@@ -18,7 +18,7 @@ const isRadio = (node) => {
18
18
  const checkFormFitness = (values, validationMap, validate) => {
19
19
  const _values = get(values);
20
20
  for (const [name, { validations }] of Object.entries(validationMap)) {
21
- validate({ name, value: _values[name], validations, });
21
+ validate({ name, value: _values[name], validations });
22
22
  }
23
23
  };
24
24
  export const formAction = (values, errors, unfits, isdirty, options, validationMap) => {
@@ -33,7 +33,7 @@ export const formAction = (values, errors, unfits, isdirty, options, validationM
33
33
  return (node, eventProps) => {
34
34
  const nodeName = isField(node) ? node.name : '';
35
35
  const { name: dsname = nodeName } = node.dataset || {};
36
- const { name = dsname, validations = [], validateEvent = options.validateEvent = 'blur', html = false } = eventProps || {};
36
+ const { name = dsname, validations = [], validateEvent = (options.validateEvent = 'blur'), html = false } = eventProps || {};
37
37
  validationMap[name] = { validations, html, nodeRef: node };
38
38
  const storedValue = get(values)[name] || '';
39
39
  let defValue = storedValue;
package/dist/form-validators.d.ts CHANGED
@@ -1,6 +1,6 @@
1
- import { type Writable } from "svelte/store";
2
- import type { ValidateArgs, ValidatorType, ValidatorMap } from "./types.js";
3
- import type { Params } from "./internal.js";
1
+ import { type Writable } from 'svelte/store';
2
+ import type { ValidateArgs, ValidatorType, ValidatorMap } from './types.js';
3
+ import type { Params } from './internal.js';
4
4
  export declare const IS_REQUIRED = "required";
5
5
  export declare const IS_EMAIL = "email";
6
6
  export declare const IS_URL = "url";
package/dist/form-validators.js CHANGED
@@ -1,5 +1,5 @@
1
- import { get } from "svelte/store";
2
- import { makeName, isValidFileSize } from "./utils.js";
1
+ import { get } from 'svelte/store';
2
+ import { makeName, isValidFileSize } from './utils.js';
3
3
  const regexes = {
4
4
  number: /^[-+]?[0-9]+(\.[0-9]+)?$/g,
5
5
  alpha: /^[A-Z\s]+$/gi,
@@ -7,22 +7,22 @@ const regexes = {
7
7
  integer: /^[-+]?\d+$/g,
8
8
  email: /^[A-Z0-9._%+-]+@(?:[A-Z0-9-]+\.)+[A-Z]{2,4}$/gi,
9
9
  url: /^(?:(?:https?|ftp):\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,}))\.?)(?::\d{2,5})?(?:[/?#]\S*)?$/i,
10
- ip: /^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/g,
10
+ ip: /^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/g
11
11
  };
12
- export const IS_REQUIRED = "required";
13
- export const IS_EMAIL = "email";
14
- export const IS_URL = "url";
15
- export const IS_IP = "ip";
16
- export const IS_INTEGER = "integer";
17
- export const IS_NUMBER = "number";
18
- export const IS_ALPHA = "alpha";
19
- export const IS_ALPHANUM = "alphanum";
20
- export const IS_MIN_LEN = "minlen";
21
- export const IS_MAX_LEN = "maxlen";
22
- export const IS_LEN = "len";
23
- export const IS_MIN = "min";
24
- export const IS_MAX = "max";
25
- export const IT_MATCHES = "match";
12
+ export const IS_REQUIRED = 'required';
13
+ export const IS_EMAIL = 'email';
14
+ export const IS_URL = 'url';
15
+ export const IS_IP = 'ip';
16
+ export const IS_INTEGER = 'integer';
17
+ export const IS_NUMBER = 'number';
18
+ export const IS_ALPHA = 'alpha';
19
+ export const IS_ALPHANUM = 'alphanum';
20
+ export const IS_MIN_LEN = 'minlen';
21
+ export const IS_MAX_LEN = 'maxlen';
22
+ export const IS_LEN = 'len';
23
+ export const IS_MIN = 'min';
24
+ export const IS_MAX = 'max';
25
+ export const IT_MATCHES = 'match';
26
26
  export const IS_FILE_SIZE_MB = 'file-size-mb';
27
27
  const getDefaultValidators = () => {
28
28
  const validators = {
@@ -30,28 +30,34 @@ const getDefaultValidators = () => {
30
30
  if (!value || (Array.isArray(value) && !value.length)) {
31
31
  return `${label} is mandatory.`;
32
32
  }
33
- return "";
33
+ return '';
34
34
  },
35
35
  [IS_EMAIL]: ({ value, label }) => {
36
- return (!!value && !value.match(regexes['email'])) ? `${label} should be a valid email.` : '';
36
+ return !!value && !value.match(regexes['email']) ? `${label} should be a valid email.` : '';
37
37
  },
38
38
  [IS_URL]: ({ value, label }) => {
39
- return !!value && !value.match(regexes['url']) ? `${label} should be a valid URL.` : "";
39
+ return !!value && !value.match(regexes['url']) ? `${label} should be a valid URL.` : '';
40
40
  },
41
41
  [IS_IP]: ({ value, label }) => {
42
- return !!value && !value.match(regexes['ip']) ? `${label} should be a valid IP.` : "";
42
+ return !!value && !value.match(regexes['ip']) ? `${label} should be a valid IP.` : '';
43
43
  },
44
44
  [IS_INTEGER]: ({ value, label }) => {
45
- return !!value && !value.match(regexes['integer']) ? `${label} must be an integer number.` : "";
45
+ return !!value && !value.match(regexes['integer'])
46
+ ? `${label} must be an integer number.`
47
+ : '';
46
48
  },
47
49
  [IS_NUMBER]: ({ value, label }) => {
48
- return !!value && !value.match(regexes['number']) ? `${label} must be a number.` : "";
50
+ return !!value && !value.match(regexes['number']) ? `${label} must be a number.` : '';
49
51
  },
50
52
  [IS_ALPHA]: ({ value, label }) => {
51
- return !!value && !value.match(regexes['alpha']) ? `${label} should be a string of alphabets.` : "";
53
+ return !!value && !value.match(regexes['alpha'])
54
+ ? `${label} should be a string of alphabets.`
55
+ : '';
52
56
  },
53
57
  [IS_ALPHANUM]: ({ value, label }) => {
54
- return !!value && !value.match(regexes['alphanum']) ? `${label} should be a string of alphanumerics starting with alphabets.` : "";
58
+ return !!value && !value.match(regexes['alphanum'])
59
+ ? `${label} should be a string of alphanumerics starting with alphabets.`
60
+ : '';
55
61
  },
56
62
  [IS_MIN_LEN]: ({ value, label, parts }) => {
57
63
  if (!!value) {
@@ -59,9 +65,11 @@ const getDefaultValidators = () => {
59
65
  return `${label}: min-length validation requires minimum length.`;
60
66
  }
61
67
  const extra = parts[1].trim();
62
- return value.length >= parseInt(parts[1], 10) ? "" : `${label} must be at least ${extra} characters long.`;
68
+ return value.length >= parseInt(parts[1], 10)
69
+ ? ''
70
+ : `${label} must be at least ${extra} characters long.`;
63
71
  }
64
- return "";
72
+ return '';
65
73
  },
66
74
  [IS_MAX_LEN]: ({ value, label, parts }) => {
67
75
  if (!!value) {
@@ -69,9 +77,11 @@ const getDefaultValidators = () => {
69
77
  return `${label}: max-length validation requires maximum length.`;
70
78
  }
71
79
  const extra = parts[1].trim();
72
- return value.length <= parseInt(parts[1], 10) ? "" : `${label} must be at most ${extra} characters long.`;
80
+ return value.length <= parseInt(parts[1], 10)
81
+ ? ''
82
+ : `${label} must be at most ${extra} characters long.`;
73
83
  }
74
- return "";
84
+ return '';
75
85
  },
76
86
  [IS_LEN]: ({ value, label, parts }) => {
77
87
  if (!!value) {
@@ -79,9 +89,11 @@ const getDefaultValidators = () => {
79
89
  return `${label}: length validation requires length.`;
80
90
  }
81
91
  const extra = parts[1].trim();
82
- return value.length === parseInt(parts[1], 10) ? "" : `${label} must exactly be ${extra} characters long.`;
92
+ return value.length === parseInt(parts[1], 10)
93
+ ? ''
94
+ : `${label} must exactly be ${extra} characters long.`;
83
95
  }
84
- return "";
96
+ return '';
85
97
  },
86
98
  [IS_MAX]: ({ value, label, parts }) => {
87
99
  if (!!value) {
@@ -89,9 +101,11 @@ const getDefaultValidators = () => {
89
101
  return `${label}: max validation requires the maximum value.`;
90
102
  }
91
103
  const extra = parts[1].trim();
92
- return parseInt(value, 10) <= parseInt(parts[1], 10) ? "" : `${label} must not be greater than ${extra}.`;
104
+ return parseInt(value, 10) <= parseInt(parts[1], 10)
105
+ ? ''
106
+ : `${label} must not be greater than ${extra}.`;
93
107
  }
94
- return "";
108
+ return '';
95
109
  },
96
110
  [IS_MIN]: ({ value, label, parts }) => {
97
111
  if (!!value) {
@@ -99,9 +113,11 @@ const getDefaultValidators = () => {
99
113
  return `${label}: min validation requires the minimum value.`;
100
114
  }
101
115
  const extra = parts[1].trim();
102
- return parseInt(value, 10) >= parseInt(parts[1], 10) ? "" : `${label} must not be less than ${extra}.`;
116
+ return parseInt(value, 10) >= parseInt(parts[1], 10)
117
+ ? ''
118
+ : `${label} must not be less than ${extra}.`;
103
119
  }
104
- return "";
120
+ return '';
105
121
  },
106
122
  [IT_MATCHES]: ({ values, value, label, parts }) => {
107
123
  if (value) {
@@ -110,20 +126,19 @@ const getDefaultValidators = () => {
110
126
  }
111
127
  const partyName = parts[1].trim();
112
128
  const partyValue = values[partyName];
113
- return value === partyValue ? "" : `${label} does not match ${makeName(partyName)}.`;
129
+ return value === partyValue ? '' : `${label} does not match ${makeName(partyName)}.`;
114
130
  }
115
- return "";
131
+ return '';
116
132
  },
117
133
  [IS_FILE_SIZE_MB]: ({ value, node, label, parts }) => {
118
134
  if (!!value) {
119
135
  if (!parts || parts.length < 2) {
120
136
  return `${label}: max file size in MB validation requires maximum file size of mb value.`;
121
- ;
122
137
  }
123
138
  const extra = parts[1].trim();
124
139
  return isValidFileSize(node, parseInt(extra, 10));
125
140
  }
126
- return "";
141
+ return '';
127
142
  }
128
143
  };
129
144
  return validators;
@@ -137,13 +152,22 @@ export const useValidator = (errors, values, validators = getDefaultValidators()
137
152
  return {
138
153
  validate: async ({ name, value, validations = [], node = undefined }) => {
139
154
  if (validations.length) {
140
- const _validations = validations.includes('required') ? ['required', ...validations.filter((val) => val !== 'required')] : [...validations];
155
+ const _validations = validations.includes('required')
156
+ ? ['required', ...validations.filter((val) => val !== 'required')]
157
+ : [...validations];
141
158
  for (let i = 0; i < _validations.length; ++i) {
142
159
  const validation = _validations[i], parts = validation.split(':'), type = parts[0].trim();
143
160
  const validator = validators[type];
144
161
  if (!validator)
145
162
  return;
146
- const error = validator({ name, label: makeName(name), value, values: get(values), node, parts });
163
+ const error = validator({
164
+ name,
165
+ label: makeName(name),
166
+ value,
167
+ values: get(values),
168
+ node,
169
+ parts
170
+ });
147
171
  setError(name, error ? error : '');
148
172
  if (error) {
149
173
  break;
package/dist/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export * from "./types.js";
2
- export { IS_EMAIL, IS_ALPHA, IS_ALPHANUM, IS_INTEGER, IS_IP, IS_LEN, IT_MATCHES as IS_MATCH_FOR, IS_MAX, IS_FILE_SIZE_MB as IS_MAX_FILE_SIZE, IS_MAX_LEN, IS_MIN, IS_MIN_LEN, IS_NUMBER, IS_REQUIRED, IS_URL } from "./form-validators.js";
3
- import microform from "./index.svelte.js";
1
+ export * from './types.js';
2
+ export { IS_EMAIL, IS_ALPHA, IS_ALPHANUM, IS_INTEGER, IS_IP, IS_LEN, IT_MATCHES as IS_MATCH_FOR, IS_MAX, IS_FILE_SIZE_MB as IS_MAX_FILE_SIZE, IS_MAX_LEN, IS_MIN, IS_MIN_LEN, IS_NUMBER, IS_REQUIRED, IS_URL } from './form-validators.js';
3
+ import microform from './index.svelte.js';
4
4
  export default microform;
package/dist/index.js CHANGED
@@ -1,4 +1,4 @@
1
- export * from "./types.js";
2
- export { IS_EMAIL, IS_ALPHA, IS_ALPHANUM, IS_INTEGER, IS_IP, IS_LEN, IT_MATCHES as IS_MATCH_FOR, IS_MAX, IS_FILE_SIZE_MB as IS_MAX_FILE_SIZE, IS_MAX_LEN, IS_MIN, IS_MIN_LEN, IS_NUMBER, IS_REQUIRED, IS_URL } from "./form-validators.js";
3
- import microform from "./index.svelte.js";
1
+ export * from './types.js';
2
+ export { IS_EMAIL, IS_ALPHA, IS_ALPHANUM, IS_INTEGER, IS_IP, IS_LEN, IT_MATCHES as IS_MATCH_FOR, IS_MAX, IS_FILE_SIZE_MB as IS_MAX_FILE_SIZE, IS_MAX_LEN, IS_MIN, IS_MIN_LEN, IS_NUMBER, IS_REQUIRED, IS_URL } from './form-validators.js';
3
+ import microform from './index.svelte.js';
4
4
  export default microform;
package/dist/index.svelte.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { writable, derived, get } from 'svelte/store';
2
2
  import { formAction } from './form-action.js';
3
- import { bindStateToStore } from "./utils.js";
3
+ import { bindStateToStore } from './utils.js';
4
4
  const microform = (props) => {
5
5
  // form default values
6
6
  const data = props?.data || {};
@@ -11,13 +11,15 @@ const microform = (props) => {
11
11
  // external form errors
12
12
  const _errors = writable({});
13
13
  const isdirty = writable(false);
14
- const isclean = derived(([_errors, unfits]), ([$errors, $unfits]) => {
14
+ const isclean = derived([_errors, unfits], ([$errors, $unfits]) => {
15
15
  const errVals = Object.values($errors);
16
16
  const unfitVals = Object.values($unfits);
17
- return (errVals.length === 0 || errVals.reduce((comm, next) => comm && !next, true))
18
- && (unfitVals.length === 0 || unfitVals.reduce((comm, next) => comm && !next, true));
17
+ return ((errVals.length === 0 ||
18
+ errVals.reduce((comm, next) => comm && !next, true)) &&
19
+ (unfitVals.length === 0 ||
20
+ unfitVals.reduce((comm, next) => comm && !next, true)));
19
21
  });
20
- const _valid = derived(([isclean, isdirty]), ([$isclean, $isdirty]) => {
22
+ const _valid = derived([isclean, isdirty], ([$isclean, $isdirty]) => {
21
23
  return $isclean && $isdirty;
22
24
  });
23
25
  const validationMap = {};
@@ -51,10 +53,10 @@ const microform = (props) => {
51
53
  for (const [name, { nodeRef, html }] of Object.entries(validationMap).filter(([, { nodeRef }]) => !!nodeRef)) {
52
54
  if (nodeRef) {
53
55
  if (nodeRef.isContentEditable) {
54
- nodeRef[html ? "innerHTML" : 'textContent'] = data[name] || '';
56
+ nodeRef[html ? 'innerHTML' : 'textContent'] = data[name] || '';
55
57
  }
56
58
  else {
57
- nodeRef["value"] = data[name] || '';
59
+ nodeRef['value'] = data[name] || '';
58
60
  }
59
61
  }
60
62
  }
@@ -74,7 +76,7 @@ const microform = (props) => {
74
76
  form,
75
77
  submit,
76
78
  onsubmit,
77
- reset,
79
+ reset
78
80
  };
79
81
  };
80
82
  export default microform;
package/dist/types.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import { type Writable } from "svelte/store";
2
- import type { Params } from "./internal.js";
1
+ import { type Writable } from 'svelte/store';
2
+ import type { Params } from './internal.js';
3
3
  export type Validator = `max:${number}` | `min:${number}` | `len:${number}` | `minlen:${number}` | `maxlen:${number}` | `file-size-mb:${number}` | `match:${string}` | 'required' | 'email' | 'integer' | 'number' | 'alpha' | 'alphanum' | 'url' | 'ip';
4
4
  export type ValidatorKey = 'required' | 'email' | 'integer' | 'number' | 'alpha' | 'alphanum' | 'url' | 'ip' | `max` | `min` | `len` | `minlen` | `maxlen` | `file-size-mb` | `match`;
5
5
  export type FieldProps = {
@@ -26,7 +26,7 @@ export interface ValidateArgs {
26
26
  export type FormReturn = {
27
27
  destroy: () => void;
28
28
  };
29
- export type ValidateEvent = 'input' | 'change' | 'keyup' | 'blur';
29
+ export type ValidateEvent = 'input' | 'change' | 'keyup' | 'blur' | 'keydown';
30
30
  export type FormValues = Params;
31
31
  export type FormErrors = Params;
32
32
  export type Dirty = Writable<boolean>;
package/dist/types.js CHANGED
@@ -1 +1 @@
1
- import {} from "svelte/store";
1
+ import {} from 'svelte/store';
package/dist/utils.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import type { Writable } from "svelte/store";
2
- import type { Params } from "./internal.js";
1
+ import type { Writable } from 'svelte/store';
2
+ import type { Params } from './internal.js';
3
3
  type TEvent = {
4
4
  target: HTMLElement;
5
5
  };
package/dist/utils.js CHANGED
@@ -1,21 +1,20 @@
1
1
  export const getEditableContent = (e, isHtml) => {
2
2
  const el = e.target;
3
- const text = el.textContent?.trim() || "";
3
+ const text = el.textContent?.trim() || '';
4
4
  if (!isHtml) {
5
5
  return { text, value: text };
6
6
  }
7
+ if (!text) {
8
+ return { value: '', text };
9
+ }
7
10
  let htm = el.innerHTML;
8
11
  htm = htm.trim();
9
- htm = htm.replace(/<br>/g, "");
10
- htm = htm.replace(/<div><\/div>/g, "");
11
- htm = htm.replace(/<p><\/p>/g, "");
12
- htm = htm.replace(/<div>/g, "<p>");
13
- htm = htm.replace(/<\/div>/g, "</p>");
14
- htm = htm.trim()
15
- ? htm.indexOf("<p>") === -1
16
- ? `<p>${htm}</p>`
17
- : htm
18
- : htm;
12
+ htm = htm.replace(/<br>/g, '');
13
+ htm = htm.replace(/<div><\/div>/g, '');
14
+ htm = htm.replace(/<p><\/p>/g, '');
15
+ htm = htm.replace(/<div>/g, '<p>');
16
+ htm = htm.replace(/<\/div>/g, '</p>');
17
+ htm = htm.trim() ? (htm.indexOf('<p>') === -1 ? `<p>${htm}</p>` : htm) : htm;
19
18
  return { value: htm.trim(), text };
20
19
  };
21
20
  export const makeName = function (str) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@steveesamson/microform",
3
- "version": "1.0.8",
3
+ "version": "1.0.9",
4
4
  "scripts": {
5
5
  "dev": "vite dev",
6
6
  "postbuild": "touch ./docs/.nojekyll",