@sfxcode/formkit-openvue 0.8.1 → 0.9.1

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 (23) hide show
  1. package/README.md +59 -1
  2. package/dist/components/FormOutputLink.vue +5 -2
  3. package/dist/composables/useFormKitInput.mjs +18 -2
  4. package/dist/composables/useFormKitRepeater.mjs +17 -3
  5. package/dist/composables/useFormKitSchema.mjs +8 -1
  6. package/dist/composables/useFormKitSection.mjs +7 -1
  7. package/dist/composables/useInputEditor.mjs +41 -4
  8. package/dist/composables/useInputEditorSchema.mjs +4 -1
  9. package/dist/definitions/input.mjs +376 -22
  10. package/dist/definitions/repeater.js +81 -26
  11. package/dist/definitions/repeater.mjs +133 -29
  12. package/dist/plugins/autoAnimate.d.ts +9 -0
  13. package/dist/plugins/autoAnimate.js +93 -0
  14. package/dist/plugins/autoAnimate.mjs +90 -0
  15. package/dist/plugins/index.d.ts +2 -0
  16. package/dist/plugins/index.js +7 -0
  17. package/dist/plugins/index.mjs +30 -23
  18. package/dist/sass/formkit-openvue.scss +32 -1
  19. package/dist/style.css +1 -1
  20. package/dist/utils/clonePlain.d.ts +10 -0
  21. package/dist/utils/clonePlain.js +25 -0
  22. package/dist/utils/clonePlain.mjs +24 -0
  23. package/package.json +22 -34
package/dist/definitions/input.mjs CHANGED
@@ -22,90 +22,444 @@ import FormToggleButton from "../components/FormToggleButton.vue";
22
22
  import FormToggleSwitch from "../components/FormToggleSwitch.vue";
23
23
  import FormTreeSelect from "../components/FormTreeSelect.vue";
24
24
  export const formAutoCompleteDefinition = createInput(FormAutoComplete, {
25
- props: ["pt", "ptOptions", "unstyled", "Select", "multiple", "typeahead", "optionLabel", "options", "size", "minLength", "placeholder", "fluid", "separators"],
25
+ props: [
26
+ "pt",
27
+ "ptOptions",
28
+ "unstyled",
29
+ "Select",
30
+ "multiple",
31
+ "typeahead",
32
+ "optionLabel",
33
+ "options",
34
+ "size",
35
+ "minLength",
36
+ "placeholder",
37
+ "fluid",
38
+ "separators"
39
+ ],
26
40
  family: "FormInput"
27
41
  });
28
42
  export const formInputTextDefinition = createInput(FormInputText, {
29
- props: ["pt", "ptOptions", "unstyled", "placeholder", "iconPrefix", "iconSuffix", "size", "inputType"],
43
+ props: [
44
+ "pt",
45
+ "ptOptions",
46
+ "unstyled",
47
+ "placeholder",
48
+ "iconPrefix",
49
+ "iconSuffix",
50
+ "size",
51
+ "inputType"
52
+ ],
30
53
  family: "FormInput"
31
54
  });
32
55
  export const formInputNumberDefinition = createInput(FormInputNumber, {
33
- props: ["useGrouping", "min", "max", "minFractionDigits", "maxFractionDigits", "locale", "mode", "currency", "prefix", "suffix", "showButtons", "buttonLayout", "step", "pt", "ptOptions", "unstyled", "placeholder", "size"],
56
+ props: [
57
+ "useGrouping",
58
+ "min",
59
+ "max",
60
+ "minFractionDigits",
61
+ "maxFractionDigits",
62
+ "locale",
63
+ "mode",
64
+ "currency",
65
+ "prefix",
66
+ "suffix",
67
+ "showButtons",
68
+ "buttonLayout",
69
+ "step",
70
+ "pt",
71
+ "ptOptions",
72
+ "unstyled",
73
+ "placeholder",
74
+ "size"
75
+ ],
34
76
  family: "FormInput"
35
77
  });
36
78
  export const formInputMaskDefinition = createInput(FormInputMask, {
37
- props: ["mask", "slotChar", "autoClear", "unmask", "pt", "ptOptions", "unstyled", "invalid", "variant", "iconPrefix", "iconSuffix", "size"],
79
+ props: [
80
+ "mask",
81
+ "slotChar",
82
+ "autoClear",
83
+ "unmask",
84
+ "pt",
85
+ "ptOptions",
86
+ "unstyled",
87
+ "invalid",
88
+ "variant",
89
+ "iconPrefix",
90
+ "iconSuffix",
91
+ "size"
92
+ ],
38
93
  family: "FormInput"
39
94
  });
40
95
  export const formPasswordDefinition = createInput(FormPassword, {
41
- props: ["mediumRegex", "strongRegex", "promptLabel", "weakLabel", "mediumLabel", "strongLabel", "hideIcon", "showIcon", "pt", "ptOptions", "unstyled", "placeholder", "feedback", "toggleMask", "size"],
96
+ props: [
97
+ "mediumRegex",
98
+ "strongRegex",
99
+ "promptLabel",
100
+ "weakLabel",
101
+ "mediumLabel",
102
+ "strongLabel",
103
+ "hideIcon",
104
+ "showIcon",
105
+ "pt",
106
+ "ptOptions",
107
+ "unstyled",
108
+ "placeholder",
109
+ "feedback",
110
+ "toggleMask",
111
+ "size"
112
+ ],
42
113
  family: "FormInput"
43
114
  });
44
115
  export const formTextareaDefinition = createInput(FormTextarea, {
45
- props: ["pt", "ptOptions", "unstyled", "autoResize", "rows", "placeholder", "size"],
116
+ props: [
117
+ "pt",
118
+ "ptOptions",
119
+ "unstyled",
120
+ "autoResize",
121
+ "rows",
122
+ "placeholder",
123
+ "size"
124
+ ],
46
125
  family: "FormInput"
47
126
  });
48
127
  export const formCheckboxDefinition = createInput(FormCheckbox, {
49
- props: ["binary", "trueValue", "falseValue", "pt", "ptOptions", "unstyled", "indeterminate", "variant", "prefix", "suffix", "size"],
128
+ props: [
129
+ "binary",
130
+ "trueValue",
131
+ "falseValue",
132
+ "pt",
133
+ "ptOptions",
134
+ "unstyled",
135
+ "indeterminate",
136
+ "variant",
137
+ "prefix",
138
+ "suffix",
139
+ "size"
140
+ ],
50
141
  family: "FormInput"
51
142
  });
52
143
  export const formToggleSwitchDefinition = createInput(FormToggleSwitch, {
53
- props: ["trueValue", "falseValue", "pt", "ptOptions", "unstyled", "prefix", "suffix"],
144
+ props: [
145
+ "trueValue",
146
+ "falseValue",
147
+ "pt",
148
+ "ptOptions",
149
+ "unstyled",
150
+ "prefix",
151
+ "suffix"
152
+ ],
54
153
  family: "FormInput"
55
154
  });
56
155
  export const formInputOtpDefinition = createInput(FormInputOtp, {
57
- props: ["length", "variant", "mask", "integerOnly", "pt", "ptOptions", "unstyled", "size"],
156
+ props: [
157
+ "length",
158
+ "variant",
159
+ "mask",
160
+ "integerOnly",
161
+ "pt",
162
+ "ptOptions",
163
+ "unstyled",
164
+ "size"
165
+ ],
58
166
  family: "FormInput"
59
167
  });
60
168
  export const formSelectDefinition = createInput(FormSelect, {
61
- props: ["options", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "scrollHeight", "filter", "filterPlaceholder", "filterLocale", "filterMatchMode", "filterFields", "filterInputProps", "editable", "placeholder", "dataKey", "showClear", "panelStyle", "panelClass", "panelProps", "appendTo", "resetFilterOnHide", "virtualScrollerOptions", "autoOptionFocus", "selectOnFocus", "filterMessage", "selectionMessage", "emptySelectionMessage", "emptyFilterMessage", "emptyMessage", "pt", "ptOptions", "unstyled", "size"],
169
+ props: [
170
+ "options",
171
+ "optionLabel",
172
+ "optionValue",
173
+ "optionDisabled",
174
+ "optionGroupLabel",
175
+ "optionGroupChildren",
176
+ "scrollHeight",
177
+ "filter",
178
+ "filterPlaceholder",
179
+ "filterLocale",
180
+ "filterMatchMode",
181
+ "filterFields",
182
+ "filterInputProps",
183
+ "editable",
184
+ "placeholder",
185
+ "dataKey",
186
+ "showClear",
187
+ "panelStyle",
188
+ "panelClass",
189
+ "panelProps",
190
+ "appendTo",
191
+ "resetFilterOnHide",
192
+ "virtualScrollerOptions",
193
+ "autoOptionFocus",
194
+ "selectOnFocus",
195
+ "filterMessage",
196
+ "selectionMessage",
197
+ "emptySelectionMessage",
198
+ "emptyFilterMessage",
199
+ "emptyMessage",
200
+ "pt",
201
+ "ptOptions",
202
+ "unstyled",
203
+ "size"
204
+ ],
62
205
  family: "FormInput"
63
206
  });
64
207
  export const formMultiSelectDefinition = createInput(FormMultiSelect, {
65
- props: ["options", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "scrollHeight", "inputProps", "closeButtonProps", "dataKey", "filter", "filterPlaceholder", "filterLocale", "filterMatchMode", "filterFields", "appendTo", "display", "maxSelectedLabels", "selectedItemsLabel", "selectionLimit", "showToggleAll", "loading", "selectAll", "resetFilterOnHide", "virtualScrollerOptions", "autoOptionFocus", "autoFilterFocus", "filterMessage", "selectionMessage", "emptySelectionMessage", "emptyFilterMessage", "emptyMessage", "pt", "placeholder", "ptOptions", "unstyled", "size"],
208
+ props: [
209
+ "options",
210
+ "optionLabel",
211
+ "optionValue",
212
+ "optionDisabled",
213
+ "optionGroupLabel",
214
+ "optionGroupChildren",
215
+ "scrollHeight",
216
+ "inputProps",
217
+ "closeButtonProps",
218
+ "dataKey",
219
+ "filter",
220
+ "filterPlaceholder",
221
+ "filterLocale",
222
+ "filterMatchMode",
223
+ "filterFields",
224
+ "appendTo",
225
+ "display",
226
+ "maxSelectedLabels",
227
+ "selectedItemsLabel",
228
+ "selectionLimit",
229
+ "showToggleAll",
230
+ "loading",
231
+ "selectAll",
232
+ "resetFilterOnHide",
233
+ "virtualScrollerOptions",
234
+ "autoOptionFocus",
235
+ "autoFilterFocus",
236
+ "filterMessage",
237
+ "selectionMessage",
238
+ "emptySelectionMessage",
239
+ "emptyFilterMessage",
240
+ "emptyMessage",
241
+ "pt",
242
+ "placeholder",
243
+ "ptOptions",
244
+ "unstyled",
245
+ "size"
246
+ ],
66
247
  family: "FormInput"
67
248
  });
68
249
  export const formListboxDefinition = createInput(FormListbox, {
69
- props: ["pt", "ptOptions", "unstyled", "options", "optionLabel", "optionValue", "multiple", "filter", "filterIcon", "filterPlaceholder", "filterLocale", "filterMatchMode", "autoOptionFocus", "selectOnFocus", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "dataKey", "metaKeySelection", "virtualScrollerOptions", "displayMode", "transferLeftHeaderText", "transferRightHeaderText", "transferHeaderClass", "transferAll", "transferButtonSeverity", "transferContainerClass", "transferListContainerClass", "transferButtonClass", "transferDragDrop"],
250
+ props: [
251
+ "pt",
252
+ "ptOptions",
253
+ "unstyled",
254
+ "options",
255
+ "optionLabel",
256
+ "optionValue",
257
+ "multiple",
258
+ "filter",
259
+ "filterIcon",
260
+ "filterPlaceholder",
261
+ "filterLocale",
262
+ "filterMatchMode",
263
+ "autoOptionFocus",
264
+ "selectOnFocus",
265
+ "optionDisabled",
266
+ "optionGroupLabel",
267
+ "optionGroupChildren",
268
+ "dataKey",
269
+ "metaKeySelection",
270
+ "virtualScrollerOptions",
271
+ "displayMode",
272
+ "transferLeftHeaderText",
273
+ "transferRightHeaderText",
274
+ "transferHeaderClass",
275
+ "transferAll",
276
+ "transferButtonSeverity",
277
+ "transferContainerClass",
278
+ "transferListContainerClass",
279
+ "transferButtonClass",
280
+ "transferDragDrop"
281
+ ],
70
282
  family: "FormInput"
71
283
  });
72
284
  export const formDatePickerDefinition = createInput(FormDatePicker, {
73
- props: ["dateFormat", "placeholder", "selectionMode", "inline", "icon", "showOtherMonths", "selectOtherMonths", "showIcon", "previousIcon", "nextIcon", "incrementIcon", "decrementIcon", "numberOfMonths", "responsiveOptions", "view", "touchUI", "minDate", "maxDate", "disabledDates", "disabledDays", "maxDateCount", "showOnFocus", "autoZIndex", "baseZIndex", "showButtonBar", "showTime", "timeOnly", "shortYearCutoff", "hourFormat", "stepHour", "stepMinute", "stepSecond", "showSeconds", "hideOnDateTimeSelect", "hideOnRangeSelection", "timeSeparator", "showWeek", "manualInput", "appendTo", "panelStyle", "panelClass", "pt", "ptOptions", "unstyled", "size", "updateModelType"],
285
+ props: [
286
+ "dateFormat",
287
+ "placeholder",
288
+ "selectionMode",
289
+ "inline",
290
+ "icon",
291
+ "showOtherMonths",
292
+ "selectOtherMonths",
293
+ "showIcon",
294
+ "previousIcon",
295
+ "nextIcon",
296
+ "incrementIcon",
297
+ "decrementIcon",
298
+ "numberOfMonths",
299
+ "responsiveOptions",
300
+ "view",
301
+ "touchUI",
302
+ "minDate",
303
+ "maxDate",
304
+ "disabledDates",
305
+ "disabledDays",
306
+ "maxDateCount",
307
+ "showOnFocus",
308
+ "autoZIndex",
309
+ "baseZIndex",
310
+ "showButtonBar",
311
+ "showTime",
312
+ "timeOnly",
313
+ "shortYearCutoff",
314
+ "hourFormat",
315
+ "stepHour",
316
+ "stepMinute",
317
+ "stepSecond",
318
+ "showSeconds",
319
+ "hideOnDateTimeSelect",
320
+ "hideOnRangeSelection",
321
+ "timeSeparator",
322
+ "showWeek",
323
+ "manualInput",
324
+ "appendTo",
325
+ "panelStyle",
326
+ "panelClass",
327
+ "pt",
328
+ "ptOptions",
329
+ "unstyled",
330
+ "size",
331
+ "updateModelType"
332
+ ],
74
333
  family: "FormInput"
75
334
  });
76
335
  export const formSliderDefinition = createInput(FormSlider, {
77
- props: ["pt", "ptOptions", "unstyled", "min", "max", "step", "range", "orientation"],
336
+ props: [
337
+ "pt",
338
+ "ptOptions",
339
+ "unstyled",
340
+ "min",
341
+ "max",
342
+ "step",
343
+ "range",
344
+ "orientation"
345
+ ],
78
346
  family: "FormInput"
79
347
  });
80
348
  export const formRatingDefinition = createInput(FormRating, {
81
- props: ["unstyled", "stars", "cancel", "onIcon", "offIcon", "cancelIcon", "ptOptions", "pt"],
349
+ props: [
350
+ "unstyled",
351
+ "stars",
352
+ "cancel",
353
+ "onIcon",
354
+ "offIcon",
355
+ "cancelIcon",
356
+ "ptOptions",
357
+ "pt"
358
+ ],
82
359
  family: "FormInput"
83
360
  });
84
361
  export const formRadioButtonDefinition = createInput(FormRadioButton, {
85
- props: ["pt", "ptOptions", "unstyled", "options", "optionsClass", "optionClass", "size"],
362
+ props: [
363
+ "pt",
364
+ "ptOptions",
365
+ "unstyled",
366
+ "options",
367
+ "optionsClass",
368
+ "optionClass",
369
+ "size"
370
+ ],
86
371
  family: "FormInput"
87
372
  });
88
373
  export const formKnobDefinition = createInput(FormKnob, {
89
- props: ["pt", "ptOptions", "unstyled", "min", "max", "step", "size", "strokeWidth", "showValue", "valueColor", "rangeColor", "textColor", "valueTemplate"],
374
+ props: [
375
+ "pt",
376
+ "ptOptions",
377
+ "unstyled",
378
+ "min",
379
+ "max",
380
+ "step",
381
+ "size",
382
+ "strokeWidth",
383
+ "showValue",
384
+ "valueColor",
385
+ "rangeColor",
386
+ "textColor",
387
+ "valueTemplate"
388
+ ],
90
389
  family: "FormInput"
91
390
  });
92
391
  export const formColorPickerDefinition = createInput(FormColorPicker, {
93
- props: ["defaultColor", "inline", "format", "pt", "ptOptions", "unstyled"],
392
+ props: [
393
+ "defaultColor",
394
+ "inline",
395
+ "format",
396
+ "pt",
397
+ "ptOptions",
398
+ "unstyled"
399
+ ],
94
400
  family: "FormInput"
95
401
  });
96
402
  export const formToggleButtonDefinition = createInput(FormToggleButton, {
97
- props: ["pt", "ptOptions", "unstyled", "onLabel", "offLabel", "onIcon", "offIcon", "iconPos", "size"],
403
+ props: [
404
+ "pt",
405
+ "ptOptions",
406
+ "unstyled",
407
+ "onLabel",
408
+ "offLabel",
409
+ "onIcon",
410
+ "offIcon",
411
+ "iconPos",
412
+ "size"
413
+ ],
98
414
  family: "FormInput"
99
415
  });
100
416
  export const formSelectButtonDefinition = createInput(FormSelectButton, {
101
- props: ["pt", "ptOptions", "unstyled", "optionLabel", "optionValue", "optionDisabled", "multiple", "unselectable", "dataKey", "options", "size"],
417
+ props: [
418
+ "pt",
419
+ "ptOptions",
420
+ "unstyled",
421
+ "optionLabel",
422
+ "optionValue",
423
+ "optionDisabled",
424
+ "multiple",
425
+ "unselectable",
426
+ "dataKey",
427
+ "options",
428
+ "size"
429
+ ],
102
430
  family: "FormInput"
103
431
  });
104
432
  export const formCascadeSelectDefinition = createInput(FormCascadeSelect, {
105
- props: ["options", "optionLabel", "optionValue", "optionGroupLabel", "optionGroupChildren", "placeholder", "pt", "ptOptions", "unstyled", "size"],
433
+ props: [
434
+ "options",
435
+ "optionLabel",
436
+ "optionValue",
437
+ "optionGroupLabel",
438
+ "optionGroupChildren",
439
+ "placeholder",
440
+ "pt",
441
+ "ptOptions",
442
+ "unstyled",
443
+ "size"
444
+ ],
106
445
  family: "FormInput"
107
446
  });
108
447
  export const formTreeSelectDefinition = createInput(FormTreeSelect, {
109
- props: ["options", "placeholder", "selectionMode", "pt", "ptOptions", "unstyled", "emptyMessage", "display", "metaKeySelection", "appendTo", "scrollHeight", "panelClass", "variant", "size"],
448
+ props: [
449
+ "options",
450
+ "placeholder",
451
+ "selectionMode",
452
+ "pt",
453
+ "ptOptions",
454
+ "unstyled",
455
+ "emptyMessage",
456
+ "display",
457
+ "metaKeySelection",
458
+ "appendTo",
459
+ "scrollHeight",
460
+ "panelClass",
461
+ "variant",
462
+ "size"
463
+ ],
110
464
  family: "FormInput"
111
465
  });