@sfxcode/formkit-primevue 4.1.0 → 4.1.2

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 (4) hide show
  1. package/README.md +1 -0
  2. package/dist/definitions/repeater.js +46 -24
  3. package/dist/definitions/repeater.mjs +40 -24
  4. package/package.json +6 -2
package/README.md CHANGED
@@ -137,6 +137,7 @@ Some samples for common tasks are available
137
137
  - Password
138
138
  - RadioButton
139
139
  - Rating
140
+ - Repeater (not a PrimeVue component, but provided as helper for repeating groups of inputs)
140
141
  - Select
141
142
  - SelectButton
142
143
  - Slider
package/dist/definitions/repeater.js CHANGED
@@ -10,36 +10,44 @@ const {
10
10
  addList,
11
11
  addElement,
12
12
  addListGroup,
13
- addComponent,
14
- addElementsInOuterDiv
13
+ addComponent
15
14
  } = (0, _useFormKitSchema.useFormKitSchema)();
16
- function addActionButtons(innerClass = "", outerClass = "", label = "Actions", help = "", render = "true") {
17
- const addButtonComponent = (onClick = "", label2 = "", icon = "", severity = "", render2 = "true", disabled = "false", styleClass = "p-button-sm") => {
18
- return addComponent("Button", {
15
+ function addButtonGroup(buttonGroupClass = "", buttonGroupItemClass = "", buttonSize, render = "true") {
16
+ const addActionButtonComponent = (onClick = "", icon = "", severity = "", render2 = "true", disabled = "false") => {
17
+ return addElement("div", [addComponent("Button", {
19
18
  onClick,
20
- label: label2,
21
19
  icon,
22
- class: styleClass,
23
20
  severity,
24
- disabled
21
+ disabled,
22
+ size: buttonSize
23
+ })], {
24
+ class: buttonGroupItemClass
25
25
  }, render2);
26
26
  };
27
- return addElementsInOuterDiv([addButtonComponent("$removeNode($node.parent, $index)", "", "pi pi-times", "danger", "true", "$false"), addButtonComponent("$cloneNode($node.parent, $index)", "", "pi pi-clone", "", "$displayCloneButton", "$false"), addButtonComponent("$moveNodeDown($node.parent, $index)", "", "pi pi-arrow-down", "secondary", "true", "$index === $node.parent.value.length -1"), addButtonComponent("$moveNodeUp($node.parent, $index)", "", "pi pi-arrow-up", "secondary", "true", "$index === 0")], innerClass, outerClass, label, help, render);
27
+ return addElement("div", [addActionButtonComponent("$moveNodeUp($node.parent, $index)", "pi pi-arrow-up", "secondary", "$renderMoveButtons", "$index === 0"), addActionButtonComponent("$removeNode($node.parent, $index)", "pi pi-trash", "danger", "$displayDeleteButton", "$false"), addActionButtonComponent("$cloneNode($node.parent, $index)", "pi pi-clone", "", "$displayCloneButton", "$false"), addActionButtonComponent("$addNode($node.parent, $index)", "pi pi-plus", "", "$displayAddButton", "$false"), addActionButtonComponent("$moveNodeDown($node.parent, $index)", "pi pi-arrow-down", "secondary", "$renderMoveButtons", "$index === $node.parent.value.length -1")], {
28
+ class: buttonGroupClass
29
+ }, render);
28
30
  }
29
- const primeRepeaterDefinition = exports.primeRepeaterDefinition = (0, _vue.createInput)([addElement("div", [addList("$listName", [addComponent("Button", {
30
- onClick: "$addNode($node)",
31
- label: "$addButtonLabel",
32
- size: "small",
33
- icon: "pi pi-plus",
34
- class: "$addButtonClass"
35
- }, "$node.children.length == 0 || $alwaysDisplayAddButton"), addListGroup([addElement("div", [{
31
+ function addInsertButton(label = "Add Item", icon = "i-lucide-plus", styleClass = "", buttonSize, render = "true") {
32
+ return addElement("div", [addComponent("Button", {
33
+ onClick: "$insertNode($node)",
34
+ label,
35
+ icon,
36
+ size: buttonSize
37
+ })], {
38
+ class: styleClass
39
+ }, render);
40
+ }
41
+ const primeRepeaterDefinition = exports.primeRepeaterDefinition = (0, _vue.createInput)([addElement("div", [addList("$listName", [addInsertButton("$insertButtonLabel", "pi pi-plus", "$insertButtonClass", "$insertButtonSize", "$node.children.length == 0 || $alwaysDisplayInsertButton"), addListGroup([addElement("div", [addElement("div", [{
36
42
  children: "$slots.default"
37
- }, addActionButtons("$buttonsInnerClass", "$buttonsOuterClass", "$buttonsLabel")], {
38
- class: "$itemClass"
43
+ }], {
44
+ class: "$groupClass"
45
+ }), addButtonGroup("$buttonGroupClass", "$buttonGroupItemClass", "$buttonSize", "$renderButtons")], {
46
+ class: "$listItemClass"
39
47
  })])], true, "true")], {
40
48
  class: "$listClass"
41
49
  })], {
42
- props: ["buttonsOuterClass", "buttonsInnerClass", "buttonsLabel", "addButtonLabel", "addButtonClass", "newItem", "itemClass", "listClass", "displayCloneButton", "alwaysDisplayAddButton"],
50
+ props: ["insertButtonLabel", "insertButtonClass", "insertButtonSize", "alwaysDisplayInsertButton", "newItem", "listClass", "listItemClass", "groupClass", "hideButtonGroup", "hideMoveButtons", "buttonGroupClass", "buttonGroupItemClass", "buttonSize", "displayCloneButton", "displayAddButton", "displayDeleteButton"],
43
51
  features: [addRepeaterHandler]
44
52
  });
45
53
  function addRepeaterHandler(node) {
@@ -54,23 +62,37 @@ function addRepeaterHandler(node) {
54
62
  if (node.context) {
55
63
  const newItem = node.context.newItem || {};
56
64
  node.context.listName = node.name;
65
+ node.context.renderButtons = !node.context.hideButtonGroup;
66
+ node.context.insertButtonSize = node.context.insertButtonSize ? node.context.insertButtonSize : "";
67
+ node.context.buttonSize = node.context.buttonSize ? node.context.buttonSize : "";
68
+ node.context.renderMoveButtons = !node.context.hideMoveButtons;
69
+ node.context.insertNode = parentNode => () => {
70
+ if (parentNode && Array.isArray(parentNode._value)) {
71
+ const newArray = [{
72
+ ...newItem
73
+ }, ...parentNode.value];
74
+ parentNode.input(newArray, false);
75
+ }
76
+ };
57
77
  node.context.removeNode = (parentNode, index) => () => {
58
78
  if (parentNode && Array.isArray(parentNode._value)) {
59
79
  parentNode.input(parentNode._value.filter((_, i) => i !== index), false);
60
80
  }
61
81
  };
62
- node.context.addNode = parentNode => () => {
82
+ node.context.addNode = (parentNode, index) => () => {
63
83
  if (parentNode && Array.isArray(parentNode._value)) {
64
- const newArray = [...parentNode.value, newItem];
65
- parentNode.input(newArray, false);
84
+ const newArray = [...parentNode.value.slice(0, index + 1), {
85
+ ...newItem
86
+ }, ...parentNode.value.slice(index + 1)];
87
+ parentNode.input([...newArray], false);
66
88
  }
67
89
  };
68
90
  node.context.cloneNode = (parentNode, index) => () => {
69
91
  if (parentNode && Array.isArray(parentNode._value)) {
70
92
  const item = parentNode.value[index];
71
- const newArray = [...parentNode.value.slice(0, index), {
93
+ const newArray = [...parentNode.value.slice(0, index + 1), {
72
94
  ...item
73
- }, ...parentNode.value.slice(index)];
95
+ }, ...parentNode.value.slice(index + 1)];
74
96
  parentNode.input([...newArray], false);
75
97
  }
76
98
  };
package/dist/definitions/repeater.mjs CHANGED
@@ -1,35 +1,41 @@
1
1
  import { createInput } from "@formkit/vue";
2
2
  import { useFormKitSchema } from "../composables/useFormKitSchema.mjs";
3
- const { addList, addElement, addListGroup, addComponent, addElementsInOuterDiv } = useFormKitSchema();
4
- function addActionButtons(innerClass = "", outerClass = "", label = "Actions", help = "", render = "true") {
5
- const addButtonComponent = (onClick = "", label2 = "", icon = "", severity = "", render2 = "true", disabled = "false", styleClass = "p-button-sm") => {
6
- return addComponent("Button", { onClick, label: label2, icon, class: styleClass, severity, disabled }, render2);
3
+ const { addList, addElement, addListGroup, addComponent } = useFormKitSchema();
4
+ function addButtonGroup(buttonGroupClass = "", buttonGroupItemClass = "", buttonSize, render = "true") {
5
+ const addActionButtonComponent = (onClick = "", icon = "", severity = "", render2 = "true", disabled = "false") => {
6
+ return addElement("div", [addComponent("Button", { onClick, icon, severity, disabled, size: buttonSize })], { class: buttonGroupItemClass }, render2);
7
7
  };
8
- return addElementsInOuterDiv([
9
- addButtonComponent("$removeNode($node.parent, $index)", "", "pi pi-times", "danger", "true", "$false"),
10
- addButtonComponent("$cloneNode($node.parent, $index)", "", "pi pi-clone", "", "$displayCloneButton", "$false"),
11
- addButtonComponent("$moveNodeDown($node.parent, $index)", "", "pi pi-arrow-down", "secondary", "true", "$index === $node.parent.value.length -1"),
12
- addButtonComponent("$moveNodeUp($node.parent, $index)", "", "pi pi-arrow-up", "secondary", "true", "$index === 0")
13
- ], innerClass, outerClass, label, help, render);
8
+ return addElement("div", [
9
+ addActionButtonComponent("$moveNodeUp($node.parent, $index)", "pi pi-arrow-up", "secondary", "$renderMoveButtons", "$index === 0"),
10
+ addActionButtonComponent("$removeNode($node.parent, $index)", "pi pi-trash", "danger", "$displayDeleteButton", "$false"),
11
+ addActionButtonComponent("$cloneNode($node.parent, $index)", "pi pi-clone", "", "$displayCloneButton", "$false"),
12
+ addActionButtonComponent("$addNode($node.parent, $index)", "pi pi-plus", "", "$displayAddButton", "$false"),
13
+ addActionButtonComponent("$moveNodeDown($node.parent, $index)", "pi pi-arrow-down", "secondary", "$renderMoveButtons", "$index === $node.parent.value.length -1")
14
+ ], { class: buttonGroupClass }, render);
15
+ }
16
+ function addInsertButton(label = "Add Item", icon = "i-lucide-plus", styleClass = "", buttonSize, render = "true") {
17
+ return addElement("div", [
18
+ addComponent("Button", { onClick: "$insertNode($node)", label, icon, size: buttonSize })
19
+ ], { class: styleClass }, render);
14
20
  }
15
21
  export const primeRepeaterDefinition = createInput(
16
22
  [
17
23
  addElement("div", [
18
24
  addList("$listName", [
19
- addComponent("Button", { onClick: "$addNode($node)", label: "$addButtonLabel", size: "small", icon: "pi pi-plus", class: "$addButtonClass" }, "$node.children.length == 0 || $alwaysDisplayAddButton"),
20
- addListGroup([
21
- addElement("div", [
22
- {
23
- children: "$slots.default"
24
- },
25
- addActionButtons("$buttonsInnerClass", "$buttonsOuterClass", "$buttonsLabel")
26
- ], { class: "$itemClass" })
27
- ])
25
+ addInsertButton("$insertButtonLabel", "pi pi-plus", "$insertButtonClass", "$insertButtonSize", "$node.children.length == 0 || $alwaysDisplayInsertButton"),
26
+ addListGroup(
27
+ [
28
+ addElement("div", [
29
+ addElement("div", [{ children: "$slots.default" }], { class: "$groupClass" }),
30
+ addButtonGroup("$buttonGroupClass", "$buttonGroupItemClass", "$buttonSize", "$renderButtons")
31
+ ], { class: "$listItemClass" })
32
+ ]
33
+ )
28
34
  ], true, "true")
29
35
  ], { class: "$listClass" })
30
36
  ],
31
37
  {
32
- props: ["buttonsOuterClass", "buttonsInnerClass", "buttonsLabel", "addButtonLabel", "addButtonClass", "newItem", "itemClass", "listClass", "displayCloneButton", "alwaysDisplayAddButton"],
38
+ props: ["insertButtonLabel", "insertButtonClass", "insertButtonSize", "alwaysDisplayInsertButton", "newItem", "listClass", "listItemClass", "groupClass", "hideButtonGroup", "hideMoveButtons", "buttonGroupClass", "buttonGroupItemClass", "buttonSize", "displayCloneButton", "displayAddButton", "displayDeleteButton"],
33
39
  features: [addRepeaterHandler]
34
40
  }
35
41
  );
@@ -45,21 +51,31 @@ function addRepeaterHandler(node) {
45
51
  if (node.context) {
46
52
  const newItem = node.context.newItem || {};
47
53
  node.context.listName = node.name;
54
+ node.context.renderButtons = !node.context.hideButtonGroup;
55
+ node.context.insertButtonSize = node.context.insertButtonSize ? node.context.insertButtonSize : "";
56
+ node.context.buttonSize = node.context.buttonSize ? node.context.buttonSize : "";
57
+ node.context.renderMoveButtons = !node.context.hideMoveButtons;
58
+ node.context.insertNode = (parentNode) => () => {
59
+ if (parentNode && Array.isArray(parentNode._value)) {
60
+ const newArray = [{ ...newItem }, ...parentNode.value];
61
+ parentNode.input(newArray, false);
62
+ }
63
+ };
48
64
  node.context.removeNode = (parentNode, index) => () => {
49
65
  if (parentNode && Array.isArray(parentNode._value)) {
50
66
  parentNode.input(parentNode._value.filter((_, i) => i !== index), false);
51
67
  }
52
68
  };
53
- node.context.addNode = (parentNode) => () => {
69
+ node.context.addNode = (parentNode, index) => () => {
54
70
  if (parentNode && Array.isArray(parentNode._value)) {
55
- const newArray = [...parentNode.value, newItem];
56
- parentNode.input(newArray, false);
71
+ const newArray = [...parentNode.value.slice(0, index + 1), { ...newItem }, ...parentNode.value.slice(index + 1)];
72
+ parentNode.input([...newArray], false);
57
73
  }
58
74
  };
59
75
  node.context.cloneNode = (parentNode, index) => () => {
60
76
  if (parentNode && Array.isArray(parentNode._value)) {
61
77
  const item = parentNode.value[index];
62
- const newArray = [...parentNode.value.slice(0, index), { ...item }, ...parentNode.value.slice(index)];
78
+ const newArray = [...parentNode.value.slice(0, index + 1), { ...item }, ...parentNode.value.slice(index + 1)];
63
79
  parentNode.input([...newArray], false);
64
80
  }
65
81
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@sfxcode/formkit-primevue",
3
3
  "type": "module",
4
- "version": "4.1.0",
4
+ "version": "4.1.2",
5
5
  "packageManager": "pnpm@11.0.9+sha512.34ce82e6780233cf9cad8685029a8f81d2e06196c5a9bad98879f7424940c6817c4e4524fb7d38b8553ceed48b9758b8ebaf1abd3600c232c4c8cf7366086f38",
6
6
  "author": {
7
7
  "name": "Tom",
@@ -70,12 +70,16 @@
70
70
  "components.d.ts",
71
71
  "dist"
72
72
  ],
73
+ "engines": {
74
+ "node": ">=24.0.0",
75
+ "pnpm": ">=11.0.0"
76
+ },
73
77
  "scripts": {
74
78
  "build": "vue-tsc --build --force && unbuild",
75
79
  "dev": "vite serve dev",
76
80
  "dev:build": "vite build dev",
77
81
  "dev:preview": "vite preview dev",
78
- "release": "npm run lint && npm run build && changelogen --minor --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",
79
83
  "lint": "eslint .",
80
84
  "lint:fix": "eslint . --fix",
81
85
  "prepublishOnly": "pnpm build",