@sfxcode/nuxt-ui-formkit 0.10.0 → 1.0.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.
- package/README.md +2 -2
- package/dist/module.json +1 -1
- package/dist/runtime/composables/useFormKitSchema.js +2 -2
- package/dist/runtime/formkit/definitions/index.d.ts +24 -23
- package/dist/runtime/formkit/definitions/index.js +3 -1
- package/dist/runtime/formkit/definitions/index.mjs +3 -1
- package/dist/runtime/formkit/definitions/repeater.d.ts +2 -0
- package/dist/runtime/formkit/definitions/repeater.js +84 -0
- package/dist/runtime/formkit/definitions/repeater.mjs +84 -0
- package/dist/runtime/utils/useFormKitInput.d.ts +2 -2
- package/package.json +15 -12
- package/dist/runtime/composables/useFormKitRepeater.d.ts +0 -5
- package/dist/runtime/composables/useFormKitRepeater.js +0 -53
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Nuxt UI FormKit
|
|
2
2
|
|
|
3
3
|
[![npm version][npm-version-src]][npm-version-href]
|
|
4
4
|
[![npm downloads][npm-downloads-src]][npm-downloads-href]
|
|
@@ -28,7 +28,7 @@ FormKit Nuxt UI bridges the gap between [FormKit](https://formkit.com/)'s powerf
|
|
|
28
28
|
- `nuxtUIInputNumber` - Number input with increment/decrement buttons
|
|
29
29
|
- `nuxtUIInputTags` - Tag input with custom delimiters
|
|
30
30
|
- `nuxtUIInputTime` - Time picker with 12/24-hour format
|
|
31
|
-
- `nuxtUIListbox` - Listbox for single/multiple selection with filtering
|
|
31
|
+
- `nuxtUIListbox` - Listbox for single/multiple selection with filtering (for use with transfer mode lucide icons must be installed additionally)
|
|
32
32
|
- `nuxtUIPinInput` - PIN/OTP entry component
|
|
33
33
|
- `nuxtUIRadioGroup` - Radio button group for single selection
|
|
34
34
|
- `nuxtUISelect` - Select dropdown with search
|
package/dist/module.json
CHANGED
|
@@ -48,11 +48,11 @@ export function useFormKitSchema() {
|
|
|
48
48
|
};
|
|
49
49
|
};
|
|
50
50
|
const addElementsInOuterDiv = (children = [], innerClass = "", outerClass = "", label = "", help = "", render = true) => {
|
|
51
|
-
const inner = addElement("div", children, { class:
|
|
51
|
+
const inner = addElement("div", children, { class: innerClass, style: "position: relative;" });
|
|
52
52
|
const labelDiv = addElement("label", [label], { class: "formkit-label" });
|
|
53
53
|
const wrapperDiv = addElement("div", [labelDiv, inner], { class: "formkit-wrapper" });
|
|
54
54
|
const helpDiv = addElement("div", [help], { class: "formkit-help" });
|
|
55
|
-
return addElement("div", [wrapperDiv, helpDiv], { class:
|
|
55
|
+
return addElement("div", [wrapperDiv, helpDiv], { class: outerClass, style: "position: relative;" }, render);
|
|
56
56
|
};
|
|
57
57
|
return { addComponent, addElement, addGroup, addList, addListGroup, addElementsInOuterDiv };
|
|
58
58
|
}
|
|
@@ -1,29 +1,30 @@
|
|
|
1
1
|
export * from './input.js';
|
|
2
2
|
export * from './output.js';
|
|
3
3
|
export declare const nuxtUIInputs: {
|
|
4
|
-
nuxtUICheckbox:
|
|
5
|
-
nuxtUICheckboxGroup:
|
|
6
|
-
nuxtUIColorPicker:
|
|
7
|
-
nuxtUIInput:
|
|
8
|
-
nuxtUIInputDate:
|
|
9
|
-
nuxtUIInputMenu:
|
|
10
|
-
nuxtUIInputNumber:
|
|
11
|
-
nuxtUIInputTags:
|
|
12
|
-
nuxtUIInputTime:
|
|
13
|
-
nuxtUIListbox:
|
|
14
|
-
nuxtUIPinInput:
|
|
15
|
-
nuxtUIRadioGroup:
|
|
16
|
-
nuxtUISelect:
|
|
17
|
-
nuxtUISelectMenu:
|
|
18
|
-
nuxtUISlider:
|
|
19
|
-
nuxtUISwitch:
|
|
20
|
-
nuxtUITextarea:
|
|
4
|
+
nuxtUICheckbox: FormKitTypeDefinition;
|
|
5
|
+
nuxtUICheckboxGroup: FormKitTypeDefinition;
|
|
6
|
+
nuxtUIColorPicker: FormKitTypeDefinition;
|
|
7
|
+
nuxtUIInput: FormKitTypeDefinition;
|
|
8
|
+
nuxtUIInputDate: FormKitTypeDefinition;
|
|
9
|
+
nuxtUIInputMenu: FormKitTypeDefinition;
|
|
10
|
+
nuxtUIInputNumber: FormKitTypeDefinition;
|
|
11
|
+
nuxtUIInputTags: FormKitTypeDefinition;
|
|
12
|
+
nuxtUIInputTime: FormKitTypeDefinition;
|
|
13
|
+
nuxtUIListbox: FormKitTypeDefinition;
|
|
14
|
+
nuxtUIPinInput: FormKitTypeDefinition;
|
|
15
|
+
nuxtUIRadioGroup: FormKitTypeDefinition;
|
|
16
|
+
nuxtUISelect: FormKitTypeDefinition;
|
|
17
|
+
nuxtUISelectMenu: FormKitTypeDefinition;
|
|
18
|
+
nuxtUISlider: FormKitTypeDefinition;
|
|
19
|
+
nuxtUISwitch: FormKitTypeDefinition;
|
|
20
|
+
nuxtUITextarea: FormKitTypeDefinition;
|
|
21
|
+
nuxtUIRepeater: FormKitTypeDefinition;
|
|
21
22
|
};
|
|
22
23
|
export declare const nuxtUIOutputs: {
|
|
23
|
-
nuxtUIOutputBoolean:
|
|
24
|
-
nuxtUIOutputDate:
|
|
25
|
-
nuxtUIOutputLink:
|
|
26
|
-
nuxtUIOutputList:
|
|
27
|
-
nuxtUIOutputNumber:
|
|
28
|
-
nuxtUIOutputText:
|
|
24
|
+
nuxtUIOutputBoolean: FormKitTypeDefinition;
|
|
25
|
+
nuxtUIOutputDate: FormKitTypeDefinition;
|
|
26
|
+
nuxtUIOutputLink: FormKitTypeDefinition;
|
|
27
|
+
nuxtUIOutputList: FormKitTypeDefinition;
|
|
28
|
+
nuxtUIOutputNumber: FormKitTypeDefinition;
|
|
29
|
+
nuxtUIOutputText: FormKitTypeDefinition;
|
|
29
30
|
};
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { nuxtUICheckboxDefinition, nuxtUICheckboxGroupDefinition, nuxtUIColorPickerDefinition, nuxtUIInputDateDefinition, nuxtUIInputDefinition, nuxtUIInputMenuDefinition, nuxtUIInputNumberDefinition, nuxtUIInputTagsDefinition, nuxtUIInputTimeDefinition, nuxtUIListboxDefinition, nuxtUIPinInputDefinition, nuxtUIRadioGroupDefinition, nuxtUISelectDefinition, nuxtUISelectMenuDefinition, nuxtUISliderDefinition, nuxtUISwitchDefinition, nuxtUITextareaDefinition } from "./input.js";
|
|
2
2
|
import { nuxtUIOutputBooleanDefinition, nuxtUIOutputDateDefinition, nuxtUIOutputLinkDefinition, nuxtUIOutputListDefinition, nuxtUIOutputNumberDefinition, nuxtUIOutputTextDefinition } from "./output.js";
|
|
3
|
+
import { nuxtUIRepeaterDefinition } from "./repeater.js";
|
|
3
4
|
export * from "./input.js";
|
|
4
5
|
export * from "./output.js";
|
|
5
6
|
export const nuxtUIInputs = {
|
|
@@ -19,7 +20,8 @@ export const nuxtUIInputs = {
|
|
|
19
20
|
nuxtUISelectMenu: nuxtUISelectMenuDefinition,
|
|
20
21
|
nuxtUISlider: nuxtUISliderDefinition,
|
|
21
22
|
nuxtUISwitch: nuxtUISwitchDefinition,
|
|
22
|
-
nuxtUITextarea: nuxtUITextareaDefinition
|
|
23
|
+
nuxtUITextarea: nuxtUITextareaDefinition,
|
|
24
|
+
nuxtUIRepeater: nuxtUIRepeaterDefinition
|
|
23
25
|
};
|
|
24
26
|
export const nuxtUIOutputs = {
|
|
25
27
|
nuxtUIOutputBoolean: nuxtUIOutputBooleanDefinition,
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { nuxtUICheckboxDefinition, nuxtUICheckboxGroupDefinition, nuxtUIColorPickerDefinition, nuxtUIInputDateDefinition, nuxtUIInputDefinition, nuxtUIInputMenuDefinition, nuxtUIInputNumberDefinition, nuxtUIInputTagsDefinition, nuxtUIInputTimeDefinition, nuxtUIListboxDefinition, nuxtUIPinInputDefinition, nuxtUIRadioGroupDefinition, nuxtUISelectDefinition, nuxtUISelectMenuDefinition, nuxtUISliderDefinition, nuxtUISwitchDefinition, nuxtUITextareaDefinition } from "./input.mjs";
|
|
2
2
|
import { nuxtUIOutputBooleanDefinition, nuxtUIOutputDateDefinition, nuxtUIOutputLinkDefinition, nuxtUIOutputListDefinition, nuxtUIOutputNumberDefinition, nuxtUIOutputTextDefinition } from "./output.mjs";
|
|
3
|
+
import { nuxtUIRepeaterDefinition } from "./repeater.mjs";
|
|
3
4
|
export * from "./input.mjs";
|
|
4
5
|
export * from "./output.mjs";
|
|
5
6
|
export const nuxtUIInputs = {
|
|
@@ -19,7 +20,8 @@ export const nuxtUIInputs = {
|
|
|
19
20
|
nuxtUISelectMenu: nuxtUISelectMenuDefinition,
|
|
20
21
|
nuxtUISlider: nuxtUISliderDefinition,
|
|
21
22
|
nuxtUISwitch: nuxtUISwitchDefinition,
|
|
22
|
-
nuxtUITextarea: nuxtUITextareaDefinition
|
|
23
|
+
nuxtUITextarea: nuxtUITextareaDefinition,
|
|
24
|
+
nuxtUIRepeater: nuxtUIRepeaterDefinition
|
|
23
25
|
};
|
|
24
26
|
export const nuxtUIOutputs = {
|
|
25
27
|
nuxtUIOutputBoolean: nuxtUIOutputBooleanDefinition,
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
import { createInput } from "@formkit/vue";
|
|
2
|
+
import { useFormKitSchema } from "../../composables/useFormKitSchema.js";
|
|
3
|
+
const { addList, addElement, addListGroup, addComponent, addElementsInOuterDiv } = useFormKitSchema();
|
|
4
|
+
function addActionButtons(innerClass = "", outerClass = "", label, help = "", render = "true") {
|
|
5
|
+
const addButtonComponent = (onClick = "", icon = "", color = "", render2 = "true", disabled) => {
|
|
6
|
+
return addComponent("UButton", { onClick, icon, color, disabled }, render2);
|
|
7
|
+
};
|
|
8
|
+
return addElementsInOuterDiv([
|
|
9
|
+
addButtonComponent("$removeNode($node.parent, $index)", "i-lucide-x", "error"),
|
|
10
|
+
addButtonComponent("$cloneNode($node.parent, $index)", "i-lucide-copy", "secondary", "$displayCloneButton"),
|
|
11
|
+
addButtonComponent("$moveNodeDown($node.parent, $index)", "i-lucide-arrow-down", "primary", "true", "$index === $node.parent.value.length -1"),
|
|
12
|
+
addButtonComponent("$moveNodeUp($node.parent, $index)", "i-lucide-arrow-up", "primary", "true", "$index === 0")
|
|
13
|
+
], innerClass, outerClass, label, help, render);
|
|
14
|
+
}
|
|
15
|
+
function addInsertButton(label = "Add Item", icon = "i-lucide-plus", styleClass = "", render = "true") {
|
|
16
|
+
return addElement("div", [
|
|
17
|
+
addComponent("UButton", { onClick: "$addNode($node)", label, icon })
|
|
18
|
+
], { class: styleClass }, render);
|
|
19
|
+
}
|
|
20
|
+
export const nuxtUIRepeaterDefinition = createInput(
|
|
21
|
+
[
|
|
22
|
+
addElement("div", [
|
|
23
|
+
addList("$listName", [
|
|
24
|
+
addInsertButton("$addButtonLabel", "i-lucide-plus", "$addButtonClass", "$node.children.length == 0 || $alwaysDisplayAddButton"),
|
|
25
|
+
addListGroup([
|
|
26
|
+
addElement("div", [
|
|
27
|
+
{
|
|
28
|
+
children: "$slots.default"
|
|
29
|
+
},
|
|
30
|
+
addActionButtons("$buttonsInnerClass", "$buttonsOuterClass", "$buttonsLabel")
|
|
31
|
+
], { class: "$itemClass" })
|
|
32
|
+
])
|
|
33
|
+
], true, "true")
|
|
34
|
+
], { class: "$listClass" })
|
|
35
|
+
],
|
|
36
|
+
{
|
|
37
|
+
props: ["buttonsOuterClass", "buttonsInnerClass", "buttonsLabel", "addButtonLabel", "addButtonClass", "newItem", "itemClass", "listClass", "displayCloneButton", "alwaysDisplayAddButton"],
|
|
38
|
+
features: [addRepeaterHandler]
|
|
39
|
+
}
|
|
40
|
+
);
|
|
41
|
+
function addRepeaterHandler(node) {
|
|
42
|
+
const swapElements = (array, index1, index2) => {
|
|
43
|
+
const newArray = [...array];
|
|
44
|
+
const temp = newArray[index1];
|
|
45
|
+
newArray[index1] = newArray[index2];
|
|
46
|
+
newArray[index2] = temp;
|
|
47
|
+
return newArray;
|
|
48
|
+
};
|
|
49
|
+
node.on("created", () => {
|
|
50
|
+
node.context.listName = node.name;
|
|
51
|
+
node.context.removeNode = (parentNode, index) => () => {
|
|
52
|
+
if (parentNode && parentNode._value instanceof Array) {
|
|
53
|
+
parentNode.input(parentNode._value.filter((_, i) => i !== index), false);
|
|
54
|
+
}
|
|
55
|
+
};
|
|
56
|
+
node.context.addNode = (parentNode) => () => {
|
|
57
|
+
if (parentNode && parentNode._value instanceof Array) {
|
|
58
|
+
const newArray = [...parentNode.value, node.context.newItem || {}];
|
|
59
|
+
parentNode.input(newArray, false);
|
|
60
|
+
}
|
|
61
|
+
};
|
|
62
|
+
node.context.cloneNode = (parentNode, index) => () => {
|
|
63
|
+
if (parentNode && parentNode._value instanceof Array) {
|
|
64
|
+
const item = parentNode.value[index];
|
|
65
|
+
const newArray = [...parentNode.value.slice(0, index), { ...item }, ...parentNode.value.slice(index)];
|
|
66
|
+
parentNode.input([...newArray], false);
|
|
67
|
+
}
|
|
68
|
+
};
|
|
69
|
+
node.context.moveNodeUp = (parentNode, index) => () => {
|
|
70
|
+
if (parentNode && parentNode._value instanceof Array) {
|
|
71
|
+
const array = [...parentNode.value];
|
|
72
|
+
if (index > 0)
|
|
73
|
+
parentNode.input(swapElements(array, index - 1, index), false);
|
|
74
|
+
}
|
|
75
|
+
};
|
|
76
|
+
node.context.moveNodeDown = (parentNode, index) => () => {
|
|
77
|
+
if (parentNode && parentNode._value instanceof Array) {
|
|
78
|
+
const array = [...parentNode.value];
|
|
79
|
+
if (index < array.length - 1)
|
|
80
|
+
parentNode.input(swapElements(array, index, index + 1), false);
|
|
81
|
+
}
|
|
82
|
+
};
|
|
83
|
+
});
|
|
84
|
+
}
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
import { createInput } from "@formkit/vue";
|
|
2
|
+
import { useFormKitSchema } from "../../composables/useFormKitSchema";
|
|
3
|
+
const { addList, addElement, addListGroup, addComponent, addElementsInOuterDiv } = useFormKitSchema();
|
|
4
|
+
function addActionButtons(innerClass = "", outerClass = "", label, help = "", render = "true") {
|
|
5
|
+
const addButtonComponent = (onClick = "", icon = "", color = "", render2 = "true", disabled) => {
|
|
6
|
+
return addComponent("UButton", { onClick, icon, color, disabled }, render2);
|
|
7
|
+
};
|
|
8
|
+
return addElementsInOuterDiv([
|
|
9
|
+
addButtonComponent("$removeNode($node.parent, $index)", "i-lucide-x", "error"),
|
|
10
|
+
addButtonComponent("$cloneNode($node.parent, $index)", "i-lucide-copy", "secondary", "$displayCloneButton"),
|
|
11
|
+
addButtonComponent("$moveNodeDown($node.parent, $index)", "i-lucide-arrow-down", "primary", "true", "$index === $node.parent.value.length -1"),
|
|
12
|
+
addButtonComponent("$moveNodeUp($node.parent, $index)", "i-lucide-arrow-up", "primary", "true", "$index === 0")
|
|
13
|
+
], innerClass, outerClass, label, help, render);
|
|
14
|
+
}
|
|
15
|
+
function addInsertButton(label = "Add Item", icon = "i-lucide-plus", styleClass = "", render = "true") {
|
|
16
|
+
return addElement("div", [
|
|
17
|
+
addComponent("UButton", { onClick: "$addNode($node)", label, icon })
|
|
18
|
+
], { class: styleClass }, render);
|
|
19
|
+
}
|
|
20
|
+
export const nuxtUIRepeaterDefinition = createInput(
|
|
21
|
+
[
|
|
22
|
+
addElement("div", [
|
|
23
|
+
addList("$listName", [
|
|
24
|
+
addInsertButton("$addButtonLabel", "i-lucide-plus", "$addButtonClass", "$node.children.length == 0 || $alwaysDisplayAddButton"),
|
|
25
|
+
addListGroup([
|
|
26
|
+
addElement("div", [
|
|
27
|
+
{
|
|
28
|
+
children: "$slots.default"
|
|
29
|
+
},
|
|
30
|
+
addActionButtons("$buttonsInnerClass", "$buttonsOuterClass", "$buttonsLabel")
|
|
31
|
+
], { class: "$itemClass" })
|
|
32
|
+
])
|
|
33
|
+
], true, "true")
|
|
34
|
+
], { class: "$listClass" })
|
|
35
|
+
],
|
|
36
|
+
{
|
|
37
|
+
props: ["buttonsOuterClass", "buttonsInnerClass", "buttonsLabel", "addButtonLabel", "addButtonClass", "newItem", "itemClass", "listClass", "displayCloneButton", "alwaysDisplayAddButton"],
|
|
38
|
+
features: [addRepeaterHandler]
|
|
39
|
+
}
|
|
40
|
+
);
|
|
41
|
+
function addRepeaterHandler(node) {
|
|
42
|
+
const swapElements = (array, index1, index2) => {
|
|
43
|
+
const newArray = [...array];
|
|
44
|
+
const temp = newArray[index1];
|
|
45
|
+
newArray[index1] = newArray[index2];
|
|
46
|
+
newArray[index2] = temp;
|
|
47
|
+
return newArray;
|
|
48
|
+
};
|
|
49
|
+
node.on("created", () => {
|
|
50
|
+
node.context.listName = node.name;
|
|
51
|
+
node.context.removeNode = (parentNode, index) => () => {
|
|
52
|
+
if (parentNode && parentNode._value instanceof Array) {
|
|
53
|
+
parentNode.input(parentNode._value.filter((_, i) => i !== index), false);
|
|
54
|
+
}
|
|
55
|
+
};
|
|
56
|
+
node.context.addNode = (parentNode) => () => {
|
|
57
|
+
if (parentNode && parentNode._value instanceof Array) {
|
|
58
|
+
const newArray = [...parentNode.value, node.context.newItem || {}];
|
|
59
|
+
parentNode.input(newArray, false);
|
|
60
|
+
}
|
|
61
|
+
};
|
|
62
|
+
node.context.cloneNode = (parentNode, index) => () => {
|
|
63
|
+
if (parentNode && parentNode._value instanceof Array) {
|
|
64
|
+
const item = parentNode.value[index];
|
|
65
|
+
const newArray = [...parentNode.value.slice(0, index), { ...item }, ...parentNode.value.slice(index)];
|
|
66
|
+
parentNode.input([...newArray], false);
|
|
67
|
+
}
|
|
68
|
+
};
|
|
69
|
+
node.context.moveNodeUp = (parentNode, index) => () => {
|
|
70
|
+
if (parentNode && parentNode._value instanceof Array) {
|
|
71
|
+
const array = [...parentNode.value];
|
|
72
|
+
if (index > 0)
|
|
73
|
+
parentNode.input(swapElements(array, index - 1, index), false);
|
|
74
|
+
}
|
|
75
|
+
};
|
|
76
|
+
node.context.moveNodeDown = (parentNode, index) => () => {
|
|
77
|
+
if (parentNode && parentNode._value instanceof Array) {
|
|
78
|
+
const array = [...parentNode.value];
|
|
79
|
+
if (index < array.length - 1)
|
|
80
|
+
parentNode.input(swapElements(array, index, index + 1), false);
|
|
81
|
+
}
|
|
82
|
+
};
|
|
83
|
+
});
|
|
84
|
+
}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import type { FormKitFrameworkContext } from '@formkit/core';
|
|
2
2
|
export declare function useFormKitInput(context: FormKitFrameworkContext): {
|
|
3
|
-
isInvalid: import("vue").ComputedRef<
|
|
3
|
+
isInvalid: import("vue").ComputedRef<any>;
|
|
4
4
|
validSlotNames: import("vue").ComputedRef<string[]>;
|
|
5
5
|
styleClass: import("vue").ComputedRef<string>;
|
|
6
|
-
color: import("vue").ComputedRef<"
|
|
6
|
+
color: import("vue").ComputedRef<"primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral">;
|
|
7
7
|
handleBlur: (event: FocusEvent) => void;
|
|
8
8
|
handleChange: (_: unknown) => void;
|
|
9
9
|
handleInput: (_: unknown) => void;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sfxcode/nuxt-ui-formkit",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"description": "FormKit integration for Nuxt UI - Seamlessly connect FormKit form handling with Nuxt UI components",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "Tom",
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"design-system",
|
|
35
35
|
"form-builder"
|
|
36
36
|
],
|
|
37
|
-
"packageManager": "pnpm@
|
|
37
|
+
"packageManager": "pnpm@11.0.9+sha512.34ce82e6780233cf9cad8685029a8f81d2e06196c5a9bad98879f7424940c6817c4e4524fb7d38b8553ceed48b9758b8ebaf1abd3600c232c4c8cf7366086f38",
|
|
38
38
|
"type": "module",
|
|
39
39
|
"exports": {
|
|
40
40
|
".": {
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
"dev": "npm run dev:prepare && nuxi dev playground",
|
|
80
80
|
"dev:build": "nuxi build playground",
|
|
81
81
|
"dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
|
|
82
|
-
"release": "npm run lint && npm run test && npm run prepack && changelogen --
|
|
82
|
+
"release": "npm run lint && npm run test && npm run prepack && changelogen --patch --release && npm publish --access=public && git push --follow-tags",
|
|
83
83
|
"lint": "eslint .",
|
|
84
84
|
"test": "vitest run",
|
|
85
85
|
"test:watch": "vitest watch",
|
|
@@ -88,27 +88,30 @@
|
|
|
88
88
|
"dependencies": {
|
|
89
89
|
"@formkit/addons": "^2.0.0",
|
|
90
90
|
"@formkit/nuxt": "^2.0.0",
|
|
91
|
-
"@nuxt/kit": "^4.4.
|
|
92
|
-
"@nuxt/ui": "^4.7.
|
|
91
|
+
"@nuxt/kit": "^4.4.4",
|
|
92
|
+
"@nuxt/ui": "^4.7.1"
|
|
93
93
|
},
|
|
94
94
|
"devDependencies": {
|
|
95
95
|
"@iconify-json/heroicons": "^1.2.3",
|
|
96
|
-
"@iconify-json/lucide": "^1.2.
|
|
97
|
-
"@iconify-json/simple-icons": "^1.2.
|
|
96
|
+
"@iconify-json/lucide": "^1.2.106",
|
|
97
|
+
"@iconify-json/simple-icons": "^1.2.81",
|
|
98
98
|
"@nuxt/devtools": "4.0.0-alpha.4",
|
|
99
99
|
"@nuxt/eslint-config": "^1.15.2",
|
|
100
100
|
"@nuxt/module-builder": "^1.0.2",
|
|
101
|
-
"@nuxt/schema": "^4.4.
|
|
102
|
-
"@nuxt/test-utils": "^4.0.
|
|
101
|
+
"@nuxt/schema": "^4.4.4",
|
|
102
|
+
"@nuxt/test-utils": "^4.0.3",
|
|
103
103
|
"@types/node": "latest",
|
|
104
|
+
"@vitejs/plugin-vue": "^6.0.6",
|
|
104
105
|
"changelogen": "^0.6.2",
|
|
105
|
-
"eslint": "^10.
|
|
106
|
+
"eslint": "^10.3.0",
|
|
107
|
+
"jsdom": "^29.1.1",
|
|
106
108
|
"mkdist": "^2.4.1",
|
|
107
|
-
"nuxt": "^4.4.
|
|
109
|
+
"nuxt": "^4.4.4",
|
|
108
110
|
"sass-embedded": "^1.99.0",
|
|
109
111
|
"typescript": "~6.0.3",
|
|
110
112
|
"unbuild": "^3.6.1",
|
|
111
113
|
"vitest": "^4.1.5",
|
|
112
|
-
"vue
|
|
114
|
+
"vue": "^3.5.34",
|
|
115
|
+
"vue-tsc": "^3.2.8"
|
|
113
116
|
}
|
|
114
117
|
}
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
export declare function useFormKitRepeater(): {
|
|
2
|
-
addInsertButton: (label?: string, icon?: string, styleClass?: string, render?: string) => object;
|
|
3
|
-
addGroupButtons: (innerClass?: string, outerClass?: string, label?: string, help?: string, render?: string) => object;
|
|
4
|
-
addListGroupFunctions: (data: Record<string, unknown>, addNodeDefaultObject?: object) => void;
|
|
5
|
-
};
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
import { useFormKitSchema } from "./useFormKitSchema.js";
|
|
2
|
-
export function useFormKitRepeater() {
|
|
3
|
-
const { addComponent, addElement, addElementsInOuterDiv } = useFormKitSchema();
|
|
4
|
-
function addInsertButton(label = "Add Item", icon = "i-lucide-plus", styleClass = "", render = "$node.children.length == 0") {
|
|
5
|
-
return addElement("div", [
|
|
6
|
-
addComponent("UButton", { onClick: "$addNode($node)", label, icon })
|
|
7
|
-
], { class: styleClass }, render);
|
|
8
|
-
}
|
|
9
|
-
function addListGroupFunctions(data, addNodeDefaultObject = {}) {
|
|
10
|
-
const swapElements = (array, index1, index2) => {
|
|
11
|
-
const newArray = [...array];
|
|
12
|
-
const temp = newArray[index1];
|
|
13
|
-
newArray[index1] = newArray[index2];
|
|
14
|
-
newArray[index2] = temp;
|
|
15
|
-
return newArray;
|
|
16
|
-
};
|
|
17
|
-
data.addNode = (parentNode) => () => {
|
|
18
|
-
const newArray = [...parentNode.value, addNodeDefaultObject];
|
|
19
|
-
parentNode.input(newArray, false);
|
|
20
|
-
};
|
|
21
|
-
data.removeNode = (parentNode, index) => () => {
|
|
22
|
-
parentNode.input(parentNode._value.filter((_, i) => i !== index), false);
|
|
23
|
-
};
|
|
24
|
-
data.moveNodeUp = (parentNode, index) => () => {
|
|
25
|
-
const array = [...parentNode.value];
|
|
26
|
-
if (index > 0)
|
|
27
|
-
parentNode.input(swapElements(array, index - 1, index), false);
|
|
28
|
-
};
|
|
29
|
-
data.moveNodeDown = (parentNode, index) => () => {
|
|
30
|
-
const array = [...parentNode.value];
|
|
31
|
-
if (index < array.length - 1)
|
|
32
|
-
parentNode.input(swapElements(array, index, index + 1), false);
|
|
33
|
-
};
|
|
34
|
-
data.copyNode = (parentNode, index) => () => {
|
|
35
|
-
const obj = parentNode.value[index];
|
|
36
|
-
const array = [...parentNode.value];
|
|
37
|
-
array.splice(index + 1, 0, { ...obj });
|
|
38
|
-
parentNode.input(array, false);
|
|
39
|
-
};
|
|
40
|
-
}
|
|
41
|
-
function addGroupButtons(innerClass = "", outerClass = "", label = "", help = "", render = "true") {
|
|
42
|
-
const addButtonComponent = (onClick = "", icon = "", color = "", render2 = "true") => {
|
|
43
|
-
return addComponent("UButton", { onClick, icon, color }, render2);
|
|
44
|
-
};
|
|
45
|
-
return addElementsInOuterDiv([
|
|
46
|
-
addButtonComponent("$removeNode($node.parent, $index)", "i-lucide-x", "error"),
|
|
47
|
-
addButtonComponent("$copyNode($node.parent, $index)", "i-lucide-copy", "secondary"),
|
|
48
|
-
addButtonComponent("$moveNodeUp($node.parent, $index)", "i-lucide-arrow-up", "primary", "$index != 0"),
|
|
49
|
-
addButtonComponent("$moveNodeDown($node.parent, $index)", "i-lucide-arrow-down", "primary", "$index < $node.parent.value.length -1")
|
|
50
|
-
], innerClass, outerClass, label, help, render);
|
|
51
|
-
}
|
|
52
|
-
return { addInsertButton, addGroupButtons, addListGroupFunctions };
|
|
53
|
-
}
|