@sfxcode/formkit-openvue 0.9.0 → 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 (12) hide show
  1. package/dist/components/FormOutputLink.vue +5 -2
  2. package/dist/composables/useFormKitInput.mjs +18 -2
  3. package/dist/composables/useFormKitRepeater.mjs +17 -3
  4. package/dist/composables/useFormKitSchema.mjs +8 -1
  5. package/dist/composables/useFormKitSection.mjs +7 -1
  6. package/dist/composables/useInputEditor.mjs +41 -4
  7. package/dist/composables/useInputEditorSchema.mjs +4 -1
  8. package/dist/definitions/input.mjs +376 -22
  9. package/dist/definitions/repeater.mjs +63 -6
  10. package/dist/plugins/autoAnimate.mjs +4 -1
  11. package/dist/plugins/index.mjs +29 -23
  12. package/package.json +17 -17
package/dist/components/FormOutputLink.vue CHANGED
@@ -10,8 +10,11 @@ const props = defineProps({ context: {
10
10
  } });
11
11
  const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context);
12
12
  const url = computed(() => {
13
- if (props.context?._value) return props.context?._value.indexOf("http") > -1 ? props.context?._value : `https://${props.context?._value}`;
14
- else return "";
13
+ if (props.context?._value) {
14
+ return props.context?._value.indexOf("http") > -1 ? props.context?._value : `https://${props.context?._value}`;
15
+ } else {
16
+ return "";
17
+ }
15
18
  });
16
19
  const title = computed(() => {
17
20
  const value = props.context?._value ?? "";
package/dist/composables/useFormKitInput.mjs CHANGED
@@ -19,7 +19,13 @@ export function useFormKitInput(context) {
19
19
  const unstyled = computed(() => {
20
20
  return context?.unstyled ?? isGlobalUnstyledMode();
21
21
  });
22
- const formKitCreateInputSlots = /* @__PURE__ */ new Set(["label", "help", "messages", "message", "input"]);
22
+ const formKitCreateInputSlots = /* @__PURE__ */ new Set([
23
+ "label",
24
+ "help",
25
+ "messages",
26
+ "message",
27
+ "input"
28
+ ]);
23
29
  const validSlotNames = computed(
24
30
  () => Object.keys(context?.slots || {}).filter((slotName) => !formKitCreateInputSlots.has(slotName))
25
31
  );
@@ -41,5 +47,15 @@ export function useFormKitInput(context) {
41
47
  context.node.input(value);
42
48
  }
43
49
  });
44
- return { isInvalid, validSlotNames, styleClass, unstyled, handleBlur, handleChange, handleInput, handleSelect, modelValue };
50
+ return {
51
+ isInvalid,
52
+ validSlotNames,
53
+ styleClass,
54
+ unstyled,
55
+ handleBlur,
56
+ handleChange,
57
+ handleInput,
58
+ handleSelect,
59
+ modelValue
60
+ };
45
61
  }
package/dist/composables/useFormKitRepeater.mjs CHANGED
@@ -3,7 +3,12 @@ export function useFormKitRepeater() {
3
3
  const { addElement, addComponent, addElementsInOuterDiv } = useFormKitSchema();
4
4
  function addInsertButton(label = "Add", innerClass = "", outerClass = "", buttonClass = "p-button-sm", iconClass = "oi oi-plus") {
5
5
  return addElementsInOuterDiv([
6
- addComponent("Button", { onClick: "$addNode($node)", label, class: buttonClass, icon: iconClass }, "$node.children.length == 0")
6
+ addComponent("Button", {
7
+ onClick: "$addNode($node)",
8
+ label,
9
+ class: buttonClass,
10
+ icon: iconClass
11
+ }, "$node.children.length == 0")
7
12
  ], innerClass, outerClass);
8
13
  }
9
14
  function addListGroupFunctions(data, addNodeDefaultObject = {}) {
@@ -33,13 +38,22 @@ export function useFormKitRepeater() {
33
38
  };
34
39
  data.copyNode = (parentNode, index) => () => {
35
40
  const obj = parentNode.value[index];
36
- const newArray = [...parentNode.value, { ...obj }];
41
+ const newArray = [
42
+ ...parentNode.value,
43
+ { ...obj }
44
+ ];
37
45
  parentNode.input(newArray, false);
38
46
  };
39
47
  }
40
48
  function addGroupButtons(innerClass = "", outerClass = "col-4", label = "Actions", help = "", render = "true") {
41
49
  const addButtonComponent = (onClick = "", label2 = "", icon = "", severity = "", render2 = "true", styleClass = "p-button-sm") => {
42
- return addComponent("Button", { onClick, label: label2, icon, class: styleClass, severity }, render2);
50
+ return addComponent("Button", {
51
+ onClick,
52
+ label: label2,
53
+ icon,
54
+ class: styleClass,
55
+ severity
56
+ }, render2);
43
57
  };
44
58
  return addElementsInOuterDiv([
45
59
  addButtonComponent("$removeNode($node.parent, $index)", "", "oi oi-times", "danger"),
package/dist/composables/useFormKitSchema.mjs CHANGED
@@ -54,5 +54,12 @@ export function useFormKitSchema() {
54
54
  const helpDiv = addElement("div", [help], { class: "formkit-help" });
55
55
  return addElement("div", [wrapperDiv, helpDiv], { class: outerClass, style: "position: relative;" }, render);
56
56
  };
57
- return { addComponent, addElement, addGroup, addList, addListGroup, addElementsInOuterDiv };
57
+ return {
58
+ addComponent,
59
+ addElement,
60
+ addGroup,
61
+ addList,
62
+ addListGroup,
63
+ addElementsInOuterDiv
64
+ };
58
65
  }
package/dist/composables/useFormKitSection.mjs CHANGED
@@ -15,5 +15,11 @@ export function useFormKitSection(context) {
15
15
  function generateId() {
16
16
  return typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(36).slice(2);
17
17
  }
18
- return { generateId, hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon };
18
+ return {
19
+ generateId,
20
+ hasPrefix,
21
+ hasPrefixIcon,
22
+ hasSuffix,
23
+ hasSuffixIcon
24
+ };
19
25
  }
package/dist/composables/useInputEditor.mjs CHANGED
@@ -1,7 +1,42 @@
1
1
  export function useInputEditor() {
2
- const formInputWithOptionNames = ["CascadeSelect", "Listbox", "MultiSelect", "RadioButton", "Select", "SelectButton", "TreeSelect"];
3
- const formInputNames = [...formInputWithOptionNames, "AutoComplete", "Checkbox", "ColorPicker", "DatePicker", "Editor", "InputMask", "InputNumber", "InputOtp", "InputText", "Knob", "Password", "Rating", "Slider", "Textarea", "ToggleButton", "ToggleSwitch"].sort();
4
- const formOutputNames = ["OutputBoolean", "OutputDate", "OutputDuration", "OutputLink", "OutputList", "OutputNumber", "OutputReference", "OutputText"];
2
+ const formInputWithOptionNames = [
3
+ "CascadeSelect",
4
+ "Listbox",
5
+ "MultiSelect",
6
+ "RadioButton",
7
+ "Select",
8
+ "SelectButton",
9
+ "TreeSelect"
10
+ ];
11
+ const formInputNames = [
12
+ ...formInputWithOptionNames,
13
+ "AutoComplete",
14
+ "Checkbox",
15
+ "ColorPicker",
16
+ "DatePicker",
17
+ "Editor",
18
+ "InputMask",
19
+ "InputNumber",
20
+ "InputOtp",
21
+ "InputText",
22
+ "Knob",
23
+ "Password",
24
+ "Rating",
25
+ "Slider",
26
+ "Textarea",
27
+ "ToggleButton",
28
+ "ToggleSwitch"
29
+ ].sort();
30
+ const formOutputNames = [
31
+ "OutputBoolean",
32
+ "OutputDate",
33
+ "OutputDuration",
34
+ "OutputLink",
35
+ "OutputList",
36
+ "OutputNumber",
37
+ "OutputReference",
38
+ "OutputText"
39
+ ];
5
40
  function editorDataToSchema(data) {
6
41
  if (!data)
7
42
  return {};
@@ -16,7 +51,9 @@ export function useInputEditor() {
16
51
  }
17
52
  return [key, value];
18
53
  });
19
- tempData = { ...Object.fromEntries(mapped) };
54
+ tempData = {
55
+ ...Object.fromEntries(mapped)
56
+ };
20
57
  }
21
58
  const readonlyValue = data.readonly === true ? true : void 0;
22
59
  const disabledValue = data.disabled === true ? true : void 0;
package/dist/composables/useInputEditorSchema.mjs CHANGED
@@ -24,7 +24,10 @@ export function useInputEditorSchema() {
24
24
  { label: "Dirty", value: "dirty" },
25
25
  { label: "Submit", value: "submit" }
26
26
  ];
27
- function editorSchema(inputOptions = formInputOptions([...formInputNames, ...formOutputNames])) {
27
+ function editorSchema(inputOptions = formInputOptions([
28
+ ...formInputNames,
29
+ ...formOutputNames
30
+ ])) {
28
31
  return [
29
32
  {
30
33
  $formkit: "formSelect",
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
  });
package/dist/definitions/repeater.mjs CHANGED
@@ -5,7 +5,17 @@ const { addList, addElement, addListGroup, addComponent } = useFormKitSchema();
5
5
  function addButtonGroup(buttonGroupClass = "", buttonGroupItemClass = "", buttonSize, render = "true") {
6
6
  const addActionButtonComponent = (onClick = "", icon = "", severity = "", render2 = "true", disabled = "false", label = "") => {
7
7
  const name = `${label} + " " + ($index + 1)`;
8
- return addElement("div", [addComponent("Button", { "onClick": onClick, icon, severity, disabled, "size": buttonSize, "aria-label": name, "title": name })], { class: buttonGroupItemClass }, render2);
8
+ return addElement("div", [
9
+ addComponent("Button", {
10
+ "onClick": onClick,
11
+ icon,
12
+ severity,
13
+ disabled,
14
+ "size": buttonSize,
15
+ "aria-label": name,
16
+ "title": name
17
+ })
18
+ ], { class: buttonGroupItemClass }, render2);
9
19
  };
10
20
  return addElement("div", [
11
21
  addActionButtonComponent("$moveNodeUp($node.parent, $index)", "oi oi-arrow-up", "secondary", "$renderMoveButtons", "$index === 0", "$moveUpLabel"),
@@ -17,14 +27,25 @@ function addButtonGroup(buttonGroupClass = "", buttonGroupItemClass = "", button
17
27
  }
18
28
  function addInsertButton(label = "Add Item", icon = "i-lucide-plus", styleClass = "", buttonSize, render = "true") {
19
29
  return addElement("div", [
20
- addComponent("Button", { onClick: "$insertNode($node)", label, icon, size: buttonSize, disabled: "$node.value.length > $maxItems -1" })
30
+ addComponent("Button", {
31
+ onClick: "$insertNode($node)",
32
+ label,
33
+ icon,
34
+ size: buttonSize,
35
+ disabled: "$node.value.length > $maxItems -1"
36
+ })
21
37
  ], { class: styleClass }, render);
22
38
  }
23
39
  function addUndoBar(render = "true") {
24
40
  return addElement("div", [
25
41
  addElement("div", [
26
42
  addElement("span", ["$deletedLabel"]),
27
- addComponent("Button", { onClick: "$undoRemoveNode($node)", label: "$undoLabel", size: "small", variant: "text" })
43
+ addComponent("Button", {
44
+ onClick: "$undoRemoveNode($node)",
45
+ label: "$undoLabel",
46
+ size: "small",
47
+ variant: "text"
48
+ })
28
49
  ], { class: "formkit-repeater-undo" }, "$removedItem")
29
50
  ], { "role": "status", "aria-live": "polite" }, render);
30
51
  }
@@ -60,7 +81,38 @@ export const formRepeaterDefinition = createInput(
60
81
  ], true, "true", { value: "$value", validation: "$repeaterValidation" })
61
82
  ], { class: "$internalListClass", id: "$internalListId" }, true),
62
83
  {
63
- props: ["insertButtonLabel", "insertButtonClass", "insertButtonSize", "alwaysDisplayInsertButton", "newItem", "listClass", "listItemClass", "hideButtonGroup", "hideMoveButtons", "buttonGroupClass", "buttonGroupItemClass", "buttonSize", "displayCloneButton", "displayAddButton", "displayDeleteButton", "minItems", "maxItems", "moveUpLabel", "moveDownLabel", "deleteLabel", "cloneLabel", "addLabel", "undoDelete", "undoLabel", "deletedLabel", "undoTimeout", "displayDragHandle", "draggable", "dragHandleClass", "dragHandleIconClass"],
84
+ props: [
85
+ "insertButtonLabel",
86
+ "insertButtonClass",
87
+ "insertButtonSize",
88
+ "alwaysDisplayInsertButton",
89
+ "newItem",
90
+ "listClass",
91
+ "listItemClass",
92
+ "hideButtonGroup",
93
+ "hideMoveButtons",
94
+ "buttonGroupClass",
95
+ "buttonGroupItemClass",
96
+ "buttonSize",
97
+ "displayCloneButton",
98
+ "displayAddButton",
99
+ "displayDeleteButton",
100
+ "minItems",
101
+ "maxItems",
102
+ "moveUpLabel",
103
+ "moveDownLabel",
104
+ "deleteLabel",
105
+ "cloneLabel",
106
+ "addLabel",
107
+ "undoDelete",
108
+ "undoLabel",
109
+ "deletedLabel",
110
+ "undoTimeout",
111
+ "displayDragHandle",
112
+ "draggable",
113
+ "dragHandleClass",
114
+ "dragHandleIconClass"
115
+ ],
64
116
  features: [addRepeaterHandler]
65
117
  }
66
118
  );
@@ -106,7 +158,9 @@ function addRepeaterHandler(node) {
106
158
  node.context.removedItem = void 0;
107
159
  node.context.minItems = node.context.minItems !== void 0 ? node.context.minItems : 0;
108
160
  node.context.maxItems = node.context.maxItems !== void 0 ? node.context.maxItems : Number.POSITIVE_INFINITY;
109
- node.context.repeaterValidation = [["+length", node.context.minItems, node.context.maxItems]];
161
+ node.context.repeaterValidation = [
162
+ ["+length", node.context.minItems, node.context.maxItems]
163
+ ];
110
164
  node.context.internalListId = `formkit-items-${instanceId}`;
111
165
  node.context.getListItemClass = (index) => {
112
166
  if (context.dragOverIndex === index && dragStartIndex !== index)
@@ -118,7 +172,10 @@ function addRepeaterHandler(node) {
118
172
  };
119
173
  node.context.insertNode = (parentNode) => () => {
120
174
  if (parentNode && Array.isArray(parentNode._value)) {
121
- const newArray = [makeNewItem(), ...parentNode.value];
175
+ const newArray = [
176
+ makeNewItem(),
177
+ ...parentNode.value
178
+ ];
122
179
  parentNode.input(newArray, false);
123
180
  }
124
181
  };
package/dist/plugins/autoAnimate.mjs CHANGED
@@ -64,7 +64,10 @@ export function createAutoAnimatePlugin(options = {}, targets = {}) {
64
64
  key = DEFAULT_KEY;
65
65
  if (typeof meta.autoAnimate === "object") {
66
66
  key = `${node.props.id}-${meta.section ?? "section"}`;
67
- optionsByKey.set(key, { ...options, ...meta.autoAnimate });
67
+ optionsByKey.set(key, {
68
+ ...options,
69
+ ...meta.autoAnimate
70
+ });
68
71
  }
69
72
  } else {
70
73
  const sectionName = meta?.section;
package/dist/plugins/index.mjs CHANGED
@@ -6,14 +6,17 @@ export function addFormAsteriskPlugin(node) {
6
6
  const schemaFn = node.props.definition?.schema;
7
7
  node.props.definition.schema = (sectionsSchema = {}) => {
8
8
  sectionsSchema.label = {
9
- children: ["$label", {
10
- $el: "span",
11
- if: "$state.required",
12
- attrs: {
13
- class: "p-formkit-asterisk"
14
- },
15
- children: ["*"]
16
- }]
9
+ children: [
10
+ "$label",
11
+ {
12
+ $el: "span",
13
+ if: "$state.required",
14
+ attrs: {
15
+ class: "p-formkit-asterisk"
16
+ },
17
+ children: ["*"]
18
+ }
19
+ ]
17
20
  };
18
21
  return schemaFn(sectionsSchema);
19
22
  };
@@ -28,22 +31,25 @@ export function addLabelPlugin(node) {
28
31
  const schemaFn = node.props.definition?.schema;
29
32
  node.props.definition.schema = (sectionsSchema = {}) => {
30
33
  sectionsSchema.label = {
31
- children: [{
32
- $el: "span",
33
- attrs: {
34
- title: "$help",
35
- class: "p-formkit-label"
36
- },
37
- children: ["$label"]
38
- }, {
39
- $el: "span",
40
- if: "$state.required",
41
- attrs: {
42
- class: "p-formkit-required",
43
- title: "$help"
34
+ children: [
35
+ {
36
+ $el: "span",
37
+ attrs: {
38
+ title: "$help",
39
+ class: "p-formkit-label"
40
+ },
41
+ children: ["$label"]
44
42
  },
45
- children: ["*"]
46
- }]
43
+ {
44
+ $el: "span",
45
+ if: "$state.required",
46
+ attrs: {
47
+ class: "p-formkit-required",
48
+ title: "$help"
49
+ },
50
+ children: ["*"]
51
+ }
52
+ ]
47
53
  };
48
54
  sectionsSchema.help = {
49
55
  children: []
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@sfxcode/formkit-openvue",
3
3
  "type": "module",
4
- "version": "0.9.0",
4
+ "version": "0.9.1",
5
5
  "packageManager": "pnpm@11.0.9+sha512.34ce82e6780233cf9cad8685029a8f81d2e06196c5a9bad98879f7424940c6817c4e4524fb7d38b8553ceed48b9758b8ebaf1abd3600c232c4c8cf7366086f38",
6
6
  "author": {
7
7
  "name": "Tom",
@@ -79,7 +79,7 @@
79
79
  "dev": "vite serve dev",
80
80
  "dev:build": "vite build dev",
81
81
  "dev:preview": "vite preview dev",
82
- "release": "npm run lint && npm run build && changelogen --major --release && npm publish --access public && git push --follow-tags",
82
+ "release": "npm run lint && npm run build && changelogen --patch --release && npm publish --access public && git push --follow-tags",
83
83
  "lint": "eslint .",
84
84
  "lint:fix": "eslint . --fix",
85
85
  "prepublishOnly": "pnpm build",
@@ -100,15 +100,15 @@
100
100
  "@formkit/i18n": "^2.1.2",
101
101
  "@formkit/inputs": "^2.1.2",
102
102
  "@formkit/vue": "^2.1.2",
103
- "@intlify/core": "^11.4.14",
104
- "@openvue/openicons": "^1.0.0",
105
- "@openvue/openicons-vue": "^1.0.0",
106
- "openvue": "1.0.0",
107
- "vue-i18n": "^11.4.14"
103
+ "@intlify/core": "^11.4.17",
104
+ "@openvue/openicons": "^1.1.0",
105
+ "@openvue/openicons-vue": "^1.1.0",
106
+ "openvue": "^1.1.0",
107
+ "vue-i18n": "^11.4.17"
108
108
  },
109
109
  "devDependencies": {
110
- "@antfu/eslint-config": "^9.5.1",
111
- "@openvue/themes": "1.0.0",
110
+ "@antfu/eslint-config": "^10.0.0",
111
+ "@openvue/themes": "^1.1.0",
112
112
  "@types/node": "latest",
113
113
  "@vitejs/plugin-vue": "^6.0.10",
114
114
  "@vitest/coverage-v8": "^5.0.5",
@@ -116,23 +116,23 @@
116
116
  "@vue/tsconfig": "^0.9.1",
117
117
  "@vueuse/core": "^15.0.0",
118
118
  "changelogen": "^0.6.2",
119
- "eslint": "^10.13.0",
120
- "happy-dom": "^21.0.3",
119
+ "eslint": "^10.14.0",
120
+ "happy-dom": "^21.0.4",
121
121
  "json-editor-vue": "^0.19.2",
122
122
  "mkdist": "^2.4.1",
123
- "sass": "^1.105.2",
123
+ "sass": "^1.107.1",
124
124
  "typescript": "^6.0.3",
125
125
  "unbuild": "^3.6.1",
126
- "unocss": "^66.11.0",
126
+ "unocss": "^66.12.0",
127
127
  "unplugin-auto-import": "^21.1.0",
128
128
  "unplugin-vue-components": "^32.1.0",
129
- "vite": "^8.3.4",
129
+ "vite": "^8.3.5",
130
130
  "vite-plugin-pages": "^0.33.3",
131
- "vitepress": "2.0.0-alpha.20",
131
+ "vitepress": "2.0.0-alpha.21",
132
132
  "vitest": "^5.0.5",
133
133
  "vue": "^3.5.44",
134
134
  "vue-router": "^5.4.0",
135
- "vue-sfc-transformer": "^0.3.0",
136
- "vue-tsc": "^3.3.13"
135
+ "vue-sfc-transformer": "^0.3.1",
136
+ "vue-tsc": "^3.3.14"
137
137
  }
138
138
  }