@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 CHANGED
@@ -1,4 +1,4 @@
1
- # FormKit Nuxt UI
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
@@ -4,7 +4,7 @@
4
4
  "compatibility": {
5
5
  "nuxt": ">=4.0.0"
6
6
  },
7
- "version": "0.10.0",
7
+ "version": "1.0.1",
8
8
  "builder": {
9
9
  "@nuxt/module-builder": "1.0.2",
10
10
  "unbuild": "3.6.1"
@@ -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: `formkit-inner ${innerClass}`, style: "position: relative;" });
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: `formkit-outer ${outerClass}`, style: "position: relative;" }, render);
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: import("@formkit/core").FormKitTypeDefinition;
5
- nuxtUICheckboxGroup: import("@formkit/core").FormKitTypeDefinition;
6
- nuxtUIColorPicker: import("@formkit/core").FormKitTypeDefinition;
7
- nuxtUIInput: import("@formkit/core").FormKitTypeDefinition;
8
- nuxtUIInputDate: import("@formkit/core").FormKitTypeDefinition;
9
- nuxtUIInputMenu: import("@formkit/core").FormKitTypeDefinition;
10
- nuxtUIInputNumber: import("@formkit/core").FormKitTypeDefinition;
11
- nuxtUIInputTags: import("@formkit/core").FormKitTypeDefinition;
12
- nuxtUIInputTime: import("@formkit/core").FormKitTypeDefinition;
13
- nuxtUIListbox: import("@formkit/core").FormKitTypeDefinition;
14
- nuxtUIPinInput: import("@formkit/core").FormKitTypeDefinition;
15
- nuxtUIRadioGroup: import("@formkit/core").FormKitTypeDefinition;
16
- nuxtUISelect: import("@formkit/core").FormKitTypeDefinition;
17
- nuxtUISelectMenu: import("@formkit/core").FormKitTypeDefinition;
18
- nuxtUISlider: import("@formkit/core").FormKitTypeDefinition;
19
- nuxtUISwitch: import("@formkit/core").FormKitTypeDefinition;
20
- nuxtUITextarea: import("@formkit/core").FormKitTypeDefinition;
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: import("@formkit/core").FormKitTypeDefinition;
24
- nuxtUIOutputDate: import("@formkit/core").FormKitTypeDefinition;
25
- nuxtUIOutputLink: import("@formkit/core").FormKitTypeDefinition;
26
- nuxtUIOutputList: import("@formkit/core").FormKitTypeDefinition;
27
- nuxtUIOutputNumber: import("@formkit/core").FormKitTypeDefinition;
28
- nuxtUIOutputText: import("@formkit/core").FormKitTypeDefinition;
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,2 @@
1
+ import type { FormKitTypeDefinition } from '@formkit/core';
2
+ export declare const nuxtUIRepeaterDefinition: FormKitTypeDefinition;
@@ -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<boolean>;
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<"error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral">;
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.10.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@10.33.2+sha512.a90faf6feeab71ad6c6e57f94e0fe1a12f5dcc22cd754db40ae9593eb6a3e0b6b12e3540218bb37ae083404b1f2ce6db2a4121e979829b4aff94b99f49da1cf8",
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 --major --release && npm publish --access=public && git push --follow-tags",
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.2",
92
- "@nuxt/ui": "^4.7.0"
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.103",
97
- "@iconify-json/simple-icons": "^1.2.79",
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.2",
102
- "@nuxt/test-utils": "^4.0.2",
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.2.1",
106
+ "eslint": "^10.3.0",
107
+ "jsdom": "^29.1.1",
106
108
  "mkdist": "^2.4.1",
107
- "nuxt": "^4.4.2",
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-tsc": "^3.2.7"
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
- }