@rokkit/forms 1.0.0-next.125 → 1.0.0-next.127

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 (89) hide show
  1. package/README.md +251 -0
  2. package/dist/src/display/index.d.ts +5 -0
  3. package/dist/src/index.d.ts +9 -0
  4. package/dist/src/input/index.d.ts +3 -0
  5. package/dist/src/lib/builder.svelte.d.ts +114 -4
  6. package/dist/src/lib/lookup.svelte.d.ts +87 -0
  7. package/dist/src/lib/renderers.d.ts +23 -0
  8. package/package.json +6 -4
  9. package/src/FieldLayout.svelte +4 -11
  10. package/src/FormRenderer.svelte +202 -61
  11. package/src/InfoField.svelte +26 -0
  12. package/src/Input.svelte +17 -61
  13. package/src/InputField.svelte +15 -11
  14. package/src/ValidationReport.svelte +52 -0
  15. package/src/display/DisplayCardGrid.svelte +68 -0
  16. package/src/display/DisplayList.svelte +31 -0
  17. package/src/display/DisplaySection.svelte +20 -0
  18. package/src/display/DisplayTable.svelte +68 -0
  19. package/src/display/DisplayValue.svelte +44 -0
  20. package/src/display/index.js +5 -0
  21. package/src/index.js +14 -0
  22. package/src/input/ArrayEditor.svelte +108 -0
  23. package/src/input/InputCheckbox.svelte +2 -3
  24. package/src/input/InputColor.svelte +6 -1
  25. package/src/input/InputDate.svelte +6 -1
  26. package/src/input/InputDateTime.svelte +6 -1
  27. package/src/input/InputEmail.svelte +6 -1
  28. package/src/input/InputFile.svelte +6 -2
  29. package/src/input/InputMonth.svelte +6 -1
  30. package/src/input/InputNumber.svelte +6 -1
  31. package/src/input/InputPassword.svelte +6 -1
  32. package/src/input/InputRange.svelte +6 -1
  33. package/src/input/InputSelect.svelte +31 -53
  34. package/src/input/InputSwitch.svelte +4 -15
  35. package/src/input/InputTel.svelte +6 -1
  36. package/src/input/InputText.svelte +6 -1
  37. package/src/input/InputTextArea.svelte +6 -1
  38. package/src/input/InputTime.svelte +6 -1
  39. package/src/input/InputToggle.svelte +28 -0
  40. package/src/input/InputUrl.svelte +6 -1
  41. package/src/input/InputWeek.svelte +6 -1
  42. package/src/input/index.js +3 -1
  43. package/src/lib/Input.svelte +3 -3
  44. package/src/lib/builder.svelte.js +425 -30
  45. package/src/lib/fields.js +2 -2
  46. package/src/lib/layout.js +2 -2
  47. package/src/lib/lookup.svelte.js +334 -0
  48. package/src/lib/renderers.js +83 -0
  49. package/src/lib/schema.js +1 -1
  50. package/src/types.js +0 -9
  51. package/dist/src/forms-old/input/types.d.ts +0 -7
  52. package/dist/src/forms-old/lib/form.d.ts +0 -95
  53. package/dist/src/forms-old/lib/index.d.ts +0 -1
  54. package/dist/src/lib/deprecated/nested.d.ts +0 -48
  55. package/dist/src/lib/deprecated/nested.spec.d.ts +0 -1
  56. package/dist/src/lib/deprecated/validator.d.ts +0 -30
  57. package/dist/src/lib/deprecated/validator.spec.d.ts +0 -1
  58. package/src/DataEditor.svelte +0 -30
  59. package/src/ListEditor.svelte +0 -44
  60. package/src/NestedEditor.svelte +0 -85
  61. package/src/forms-old/CheckBox.svelte +0 -56
  62. package/src/forms-old/DataEditor.svelte +0 -30
  63. package/src/forms-old/FieldLayout.svelte +0 -48
  64. package/src/forms-old/Form.svelte +0 -17
  65. package/src/forms-old/Icon.svelte +0 -76
  66. package/src/forms-old/Item.svelte +0 -25
  67. package/src/forms-old/ListEditor.svelte +0 -44
  68. package/src/forms-old/Tabs.svelte +0 -57
  69. package/src/forms-old/Wrapper.svelte +0 -12
  70. package/src/forms-old/input/Input.svelte +0 -17
  71. package/src/forms-old/input/InputField.svelte +0 -70
  72. package/src/forms-old/input/InputSelect.svelte +0 -23
  73. package/src/forms-old/input/InputSwitch.svelte +0 -19
  74. package/src/forms-old/input/types.js +0 -29
  75. package/src/forms-old/lib/form.js +0 -72
  76. package/src/forms-old/lib/index.js +0 -12
  77. package/src/forms-old/mocks/CustomField.svelte +0 -7
  78. package/src/forms-old/mocks/CustomWrapper.svelte +0 -8
  79. package/src/forms-old/mocks/Register.svelte +0 -25
  80. package/src/inp/Input.svelte +0 -17
  81. package/src/inp/InputField.svelte +0 -69
  82. package/src/inp/InputSelect.svelte +0 -23
  83. package/src/inp/InputSwitch.svelte +0 -19
  84. package/src/lib/deprecated/Form.svelte +0 -17
  85. package/src/lib/deprecated/FormRenderer.svelte +0 -121
  86. package/src/lib/deprecated/nested.js +0 -192
  87. package/src/lib/deprecated/nested.spec.js +0 -512
  88. package/src/lib/deprecated/validator.js +0 -137
  89. package/src/lib/deprecated/validator.spec.js +0 -348
@@ -1,348 +0,0 @@
1
- import { describe, expect, it } from 'vitest'
2
- import { verifiable, getPatternValidator, getRangeValidator, getTypeValidator } from './validator'
3
- import { get } from 'svelte/store'
4
-
5
- describe('validator', () => {
6
- describe('getPatternValidator', () => {
7
- it('should return a pattern validator function for a string pattern', () => {
8
- const pattern = '^example$'
9
- const validator = getPatternValidator(pattern)
10
-
11
- expect(validator).toBeDefined()
12
- expect(typeof validator).toBe('function')
13
-
14
- expect(validator('example')).toBeTruthy()
15
- expect(validator('wrong')).toBeFalsy()
16
- })
17
-
18
- it('should return a pattern validator function for a RegExp pattern', () => {
19
- const pattern = /^example$/
20
- const validator = getPatternValidator(pattern)
21
-
22
- expect(validator).toBeDefined()
23
- expect(typeof validator).toBe('function')
24
-
25
- expect(validator('example')).toBeTruthy()
26
- expect(validator('wrong')).toBeFalsy()
27
- })
28
-
29
- it('should throw an error for an invalid pattern', () => {
30
- const pattern = 123
31
-
32
- expect(() => {
33
- getPatternValidator(pattern)
34
- }).toThrowError('Invalid pattern')
35
- })
36
- })
37
-
38
- describe('getRangeValidator', () => {
39
- it('should return a range validator function', () => {
40
- const min = 5
41
- const max = 10
42
- const validator = getRangeValidator(min, max)
43
-
44
- expect(validator).toBeDefined()
45
- expect(typeof validator).toBe('function')
46
-
47
- expect(validator(3)).toBeFalsy()
48
- expect(validator(7)).toBeTruthy()
49
- expect(validator(12)).toBeFalsy()
50
- })
51
-
52
- it('should return a range validator for upper bound', () => {
53
- const validator = getRangeValidator(null, 10)
54
-
55
- expect(validator).toBeDefined()
56
- expect(typeof validator).toBe('function')
57
-
58
- expect(validator(7)).toBeTruthy()
59
- expect(validator(12)).toBeFalsy()
60
- })
61
- it('should return a range validator for lower bound', () => {
62
- const validator = getRangeValidator(5, null)
63
-
64
- expect(validator).toBeDefined()
65
- expect(typeof validator).toBe('function')
66
-
67
- expect(validator(3)).toBeFalsy()
68
- expect(validator(12)).toBeTruthy()
69
- })
70
- })
71
-
72
- describe('getTypeValidator', () => {
73
- it('should return a validator for "number" type', () => {
74
- const validator = getTypeValidator('number')
75
- expect(validator).toBeInstanceOf(Function)
76
- expect(validator(42)).toBeTruthy()
77
- expect(validator('hello')).toBeFalsy()
78
- expect(validator(null)).toBeFalsy()
79
- expect(validator()).toBeFalsy()
80
- })
81
-
82
- it('should return a validator for "email" type', () => {
83
- const validator = getTypeValidator('email')
84
- expect(validator).toBeInstanceOf(Function)
85
- expect(validator('test@example.com')).toBeTruthy()
86
- expect(validator('a@b.co.in')).toBeTruthy()
87
- expect(validator('invalid-email')).toBeFalsy()
88
- })
89
-
90
- it('should return a validator for "url" type', () => {
91
- const validator = getTypeValidator('url')
92
- expect(validator).toBeInstanceOf(Function)
93
- expect(validator('https://example.com')).toBeTruthy()
94
- expect(validator('http://example.com')).toBeTruthy()
95
- expect(validator('http://example.com?a=b')).toBeTruthy()
96
- expect(validator('http://example.com?a=1&c=1')).toBeTruthy()
97
- expect(validator('http://example.com?#123')).toBeTruthy()
98
- expect(validator('invalid-url')).toBeFalsy()
99
- expect(validator('http://x.y abc')).toBeFalsy()
100
- })
101
-
102
- it('should return a validator for "array" type', () => {
103
- const validator = getTypeValidator('array')
104
- expect(validator).toBeInstanceOf(Function)
105
- expect(validator([])).toBeTruthy()
106
- expect(validator(null)).toBeFalsy()
107
- expect(validator()).toBeFalsy()
108
- expect(validator({})).toBeFalsy()
109
- expect(validator('hello')).toBeFalsy()
110
- })
111
- it('should return a validator for "object" type', () => {
112
- const validator = getTypeValidator('object')
113
- expect(validator).toBeInstanceOf(Function)
114
- expect(validator({})).toBeTruthy()
115
- expect(validator({ alpha: 'value' })).toBeTruthy()
116
- expect(validator(null)).toBeFalsy()
117
- expect(validator()).toBeFalsy()
118
- expect(validator([])).toBeFalsy()
119
- expect(validator('hello')).toBeFalsy()
120
- expect(validator(2)).toBeFalsy()
121
- })
122
- it('should return a validator for "color" type', () => {
123
- const validator = getTypeValidator('color')
124
- expect(validator).toBeInstanceOf(Function)
125
- expect(validator('#000fff')).toBeTruthy()
126
- expect(validator('#abcdef')).toBeTruthy()
127
- expect(validator('#xxxxxx')).toBeFalsy()
128
- expect(validator('123456')).toBeFalsy()
129
- })
130
- it('should return a validator for "string" type', () => {
131
- const validator = getTypeValidator('string')
132
- expect(validator).toBeInstanceOf(Function)
133
- expect(validator('hello')).toBeTruthy()
134
- expect(validator('')).toBeTruthy()
135
- expect(validator(null)).toBeFalsy()
136
- expect(validator()).toBeFalsy()
137
- expect(validator([])).toBeFalsy()
138
- expect(validator({})).toBeFalsy()
139
- expect(validator(2)).toBeFalsy()
140
- })
141
- it('should return a validator for "date" type', () => {
142
- const validator = getTypeValidator('date')
143
- expect(validator).toBeInstanceOf(Function)
144
- expect(validator('2020-01-01')).toBeTruthy()
145
- expect(validator('2020-01-01T00:00:00.000Z')).toBeTruthy()
146
- expect(validator('2020-01-01T00:00:00.000')).toBeTruthy()
147
- expect(validator('2020-01-01T00:00:00')).toBeTruthy()
148
- expect(validator('2020-01-01T00:00')).toBeTruthy()
149
- expect(validator('2020-01-01T00')).toBeFalsy()
150
- expect(validator('2020-01-01T')).toBeFalsy()
151
- expect(validator('xyz')).toBeFalsy()
152
- expect(validator('2020-01-01T00:00:00.000+00:00')).toBeTruthy()
153
- })
154
- it('should return a validator for "boolean" type', () => {
155
- const validator = getTypeValidator('boolean')
156
- expect(validator).toBeInstanceOf(Function)
157
- expect(validator(true)).toBeTruthy()
158
- expect(validator(false)).toBeTruthy()
159
- expect(validator(null)).toBeFalsy()
160
- expect(validator()).toBeFalsy()
161
- expect(validator([])).toBeFalsy()
162
- expect(validator({})).toBeFalsy()
163
- expect(validator(2)).toBeFalsy()
164
- })
165
- })
166
-
167
- describe('verifiable', () => {
168
- const rules = [
169
- { text: 'At least 1 upper case letter', pattern: /[A-Z]+/ },
170
- { text: 'At least 1 lower case letter', pattern: /[a-z]+/ },
171
- { text: 'At least 1 number', pattern: /[0-9]+/ },
172
- { text: 'At least 1 symbol [!@#$]', pattern: /[!@#$]+/ },
173
- { text: 'At least 8 characters long', pattern: /.{8,}/ }
174
- ]
175
- const initialValidations = [
176
- { text: 'At least 1 upper case letter', valid: false, status: 'fail' },
177
- { text: 'At least 1 lower case letter', valid: true, status: 'pass' },
178
- { text: 'At least 1 number', valid: false, status: 'fail' },
179
- { text: 'At least 1 symbol [!@#$]', valid: false, status: 'fail' },
180
- { text: 'At least 8 characters long', valid: false, status: 'fail' }
181
- ]
182
-
183
- it('should create a validation store with initial value and rules', () => {
184
- const value = 'example'
185
- const store = verifiable(value, rules)
186
-
187
- expect(store).toBeDefined()
188
- expect(store.subscribe).toBeDefined()
189
- expect(store.update).toBeDefined()
190
-
191
- const currentValue = get(store)
192
-
193
- expect(currentValue.value).toBe(value)
194
- expect(currentValue.status).toBe('fail')
195
- expect(currentValue.isValid).toBeFalsy()
196
- expect(currentValue.validations).toHaveLength(5)
197
- expect(currentValue.validations).toEqual(initialValidations)
198
- })
199
-
200
- it('should update the validation store with a new value', () => {
201
- const value = 'example'
202
- const store = verifiable(value, rules)
203
-
204
- let currentValue = get(store)
205
- expect(currentValue.value).toBe(value)
206
- expect(currentValue.status).toBe('fail')
207
- expect(currentValue.isValid).toBeFalsy()
208
- expect(currentValue.validations).toHaveLength(5)
209
- expect(currentValue.validations).toEqual(initialValidations)
210
-
211
- store.update('newExample')
212
- currentValue = get(store)
213
-
214
- expect(currentValue.value).toBe('newExample')
215
- expect(currentValue.status).toBe('fail')
216
- expect(currentValue.validations).toHaveLength(5)
217
- expect(currentValue.isValid).toBeFalsy()
218
- expect(currentValue.validations).toEqual([
219
- {
220
- text: 'At least 1 upper case letter',
221
- valid: true,
222
- status: 'pass'
223
- },
224
- {
225
- text: 'At least 1 lower case letter',
226
- valid: true,
227
- status: 'pass'
228
- },
229
- { text: 'At least 1 number', valid: false, status: 'fail' },
230
- { text: 'At least 1 symbol [!@#$]', valid: false, status: 'fail' },
231
- { text: 'At least 8 characters long', valid: true, status: 'pass' }
232
- ])
233
-
234
- store.update('Example1!')
235
- currentValue = get(store)
236
-
237
- expect(currentValue.value).toBe('Example1!')
238
- expect(currentValue.status).toBe('pass')
239
- expect(currentValue.validations).toHaveLength(5)
240
- expect(currentValue.isValid).toBeTruthy()
241
- expect(currentValue.validations).toEqual([
242
- { text: 'At least 1 upper case letter', valid: true, status: 'pass' },
243
- { text: 'At least 1 lower case letter', valid: true, status: 'pass' },
244
- { text: 'At least 1 number', valid: true, status: 'pass' },
245
- { text: 'At least 1 symbol [!@#$]', valid: true, status: 'pass' },
246
- { text: 'At least 8 characters long', valid: true, status: 'pass' }
247
- ])
248
- })
249
-
250
- it('should handle optional rules', () => {
251
- const optionalRules = rules
252
- optionalRules[1].optional = true
253
-
254
- const store = verifiable('EXAMPLE1!', optionalRules)
255
- const currentValue = get(store)
256
-
257
- expect(currentValue.value).toBe('EXAMPLE1!')
258
- expect(currentValue.status).toBe('warn')
259
- expect(currentValue.validations).toHaveLength(5)
260
- expect(currentValue.isValid).toBeFalsy()
261
- expect(currentValue.validations).toEqual([
262
- { text: 'At least 1 upper case letter', valid: true, status: 'pass' },
263
- {
264
- text: 'At least 1 lower case letter',
265
- valid: false,
266
- status: 'warn'
267
- },
268
- { text: 'At least 1 number', valid: true, status: 'pass' },
269
- { text: 'At least 1 symbol [!@#$]', valid: true, status: 'pass' },
270
- { text: 'At least 8 characters long', valid: true, status: 'pass' }
271
- ])
272
- })
273
-
274
- it('should handle lower/upper bound', () => {
275
- const store = verifiable(0, [
276
- { text: 'should be numeric', type: 'number' },
277
- { text: 'should be >= 5', min: 5 },
278
- { text: 'should be <= 10', max: 10 }
279
- ])
280
-
281
- let currentValue = get(store)
282
-
283
- expect(currentValue.status).toBe('fail')
284
- expect(currentValue.validations).toEqual([
285
- { text: 'should be numeric', valid: true, status: 'pass' },
286
- { text: 'should be >= 5', valid: false, status: 'fail' },
287
- { text: 'should be <= 10', valid: true, status: 'pass' }
288
- ])
289
-
290
- store.update(7)
291
- currentValue = get(store)
292
-
293
- expect(currentValue.status).toBe('pass')
294
- expect(currentValue.validations).toEqual([
295
- { text: 'should be numeric', valid: true, status: 'pass' },
296
- { text: 'should be >= 5', valid: true, status: 'pass' },
297
- { text: 'should be <= 10', valid: true, status: 'pass' }
298
- ])
299
- store.update(11)
300
- currentValue = get(store)
301
- expect(currentValue.status).toBe('fail')
302
- expect(currentValue.validations).toEqual([
303
- { text: 'should be numeric', valid: true, status: 'pass' },
304
- { text: 'should be >= 5', valid: true, status: 'pass' },
305
- { text: 'should be <= 10', valid: false, status: 'fail' }
306
- ])
307
- })
308
-
309
- it('should handle custom validation', () => {
310
- const store = verifiable('example', [
311
- {
312
- text: 'should be "example"',
313
- validator: (value) => value === 'example'
314
- }
315
- ])
316
- let currentValue = get(store)
317
- expect(currentValue.status).toBe('pass')
318
- expect(currentValue.validations).toEqual([
319
- { text: 'should be "example"', valid: true, status: 'pass' }
320
- ])
321
-
322
- store.update('not example')
323
- currentValue = get(store)
324
- expect(currentValue.status).toBe('fail')
325
- expect(currentValue.validations).toEqual([
326
- { text: 'should be "example"', valid: false, status: 'fail' }
327
- ])
328
- })
329
- it('should work with empty ruleset', () => {
330
- const store = verifiable('example')
331
- let currentValue = get(store)
332
- expect(currentValue.value).toBe('example')
333
- expect(currentValue.status).toBe('pass')
334
- expect(currentValue.validations).toEqual([])
335
-
336
- store.update('not example')
337
- currentValue = get(store)
338
- expect(currentValue.value).toBe('not example')
339
- expect(currentValue.status).toBe('pass')
340
- expect(currentValue.validations).toEqual([])
341
- })
342
- it('should throw error for invalid rule', () => {
343
- expect(() => {
344
- verifiable('example', [{ text: 'Invalid rule' }])
345
- }).toThrow(/Invalid rule/)
346
- })
347
- })
348
- })