@sfxcode/formkit-primevue 1.9.0 → 1.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.
- package/README.md +15 -2
- package/dist/components/PrimeAutoComplete.vue +1 -1
- package/dist/components/PrimeCalendar.vue +1 -1
- package/dist/components/PrimeCascadeSelect.vue +1 -1
- package/dist/components/PrimeCheckbox.vue +1 -1
- package/dist/components/PrimeChips.vue +1 -1
- package/dist/components/PrimeColorPicker.vue +1 -1
- package/dist/components/PrimeInputSwitch.vue +1 -1
- package/dist/components/PrimeListbox.vue +1 -1
- package/dist/components/PrimeMultiSelect.vue +1 -1
- package/dist/components/PrimeRadioButton.vue +2 -2
- package/dist/components/PrimeRating.vue +1 -1
- package/dist/components/PrimeSelectButton.vue +1 -1
- package/dist/components/PrimeToggleButton.vue +1 -1
- package/dist/components/PrimeTreeSelect.vue +1 -1
- package/dist/components/PrimeTriStateCheckbox.vue +1 -1
- package/dist/composables/useFormKitSchema.d.ts +1 -1
- package/dist/composables/useFormKitSchema.js +6 -4
- package/dist/composables/useFormKitSchema.mjs +4 -4
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -23,6 +23,11 @@ import { primeInputs } from '@sfxcode/formkit-primevue'
|
|
|
23
23
|
}))
|
|
24
24
|
```
|
|
25
25
|
|
|
26
|
+
### Schema Helper Functions
|
|
27
|
+
|
|
28
|
+
[useFormKitSchema](https://github.com/sfxcode/formkit-primevue/blob/main/src/composables/useFormKitSchema.ts) provide functions to simplify the usage of elements, components, lists, ...
|
|
29
|
+
|
|
30
|
+
|
|
26
31
|
### Basic Styling
|
|
27
32
|
|
|
28
33
|
Basic styling is provided with the **formkit-primevue.scss** file.
|
|
@@ -40,7 +45,14 @@ You can use it or take it as base for your own styling.
|
|
|
40
45
|
- All inputs are wrapped in a div with a **p-formkit** class
|
|
41
46
|
- Most Prime Components have access to class / styles attributes
|
|
42
47
|
- PT and PTOptions are available ([https://primevue.org/passthrough/](https://primevue.org/passthrough/))
|
|
43
|
-
- [Styling](https://formkit-primevue.netlify.app/demo/styling)
|
|
48
|
+
- [Styling](https://formkit-primevue.netlify.app/demo/styling) and [PT](https://formkit-primevue.netlify.app/demo/passThrough) demo available
|
|
49
|
+
|
|
50
|
+
### Samples
|
|
51
|
+
|
|
52
|
+
Some samples for common tasks are available
|
|
53
|
+
|
|
54
|
+
- Repeater (with the help of the useFormKitSchema compsable)
|
|
55
|
+
- Grid
|
|
44
56
|
|
|
45
57
|
## Showcases
|
|
46
58
|
|
|
@@ -50,9 +62,11 @@ You can use it or take it as base for your own styling.
|
|
|
50
62
|
|
|
51
63
|
## Supported Inputs
|
|
52
64
|
|
|
65
|
+
- AutoComplete
|
|
53
66
|
- Calendar
|
|
54
67
|
- CascadeSelect
|
|
55
68
|
- Checkbox
|
|
69
|
+
- Chips
|
|
56
70
|
- Dropdown
|
|
57
71
|
- Editor (HTML Editor)
|
|
58
72
|
- InputMask
|
|
@@ -63,7 +77,6 @@ You can use it or take it as base for your own styling.
|
|
|
63
77
|
- MultiSelect
|
|
64
78
|
- Password
|
|
65
79
|
- Ranking
|
|
66
|
-
- Chips
|
|
67
80
|
- Knob
|
|
68
81
|
- ColorPicker
|
|
69
82
|
- Listbox
|
|
@@ -21,7 +21,7 @@ const props = defineProps({
|
|
|
21
21
|
},
|
|
22
22
|
})
|
|
23
23
|
|
|
24
|
-
function handleInput(
|
|
24
|
+
function handleInput(_: any) {
|
|
25
25
|
props.context?.node.input(props.context?._value)
|
|
26
26
|
}
|
|
27
27
|
const styleClass = computed(() => (props.context?.state.validationVisible && !props.context?.state.valid) ? `${props.context?.attrs?.class} p-invalid` : props.context?.attrs?.class)
|
|
@@ -18,7 +18,7 @@ const props = defineProps({
|
|
|
18
18
|
},
|
|
19
19
|
})
|
|
20
20
|
|
|
21
|
-
function handleChange(
|
|
21
|
+
function handleChange(_: any) {
|
|
22
22
|
props.context?.node.input(props.context?._value)
|
|
23
23
|
}
|
|
24
24
|
|
|
@@ -47,7 +47,7 @@ const styleClass = computed(() => (props.context?.state.validationVisible && !pr
|
|
|
47
47
|
:unstyled="context.unstyled ?? false"
|
|
48
48
|
@click="handleChange"
|
|
49
49
|
@change="handleChange"
|
|
50
|
-
@blur="
|
|
50
|
+
@blur="handleBlur"
|
|
51
51
|
/>
|
|
52
52
|
<label :for="option.value" class="p-formkit-radio-label">{{ option.label }}</label>
|
|
53
53
|
</div>
|
|
@@ -48,13 +48,13 @@ function useFormKitSchema() {
|
|
|
48
48
|
children
|
|
49
49
|
};
|
|
50
50
|
};
|
|
51
|
-
function addListGroupFunctions(data) {
|
|
51
|
+
function addListGroupFunctions(data, addNodeDefaultObject = {}) {
|
|
52
52
|
const swapElements = (array, index1, index2) => {
|
|
53
53
|
array[index1] = array.splice(index2, 1, array[index1])[0];
|
|
54
54
|
return array;
|
|
55
55
|
};
|
|
56
56
|
data.addNode = node => () => {
|
|
57
|
-
const newArray = [...node.value,
|
|
57
|
+
const newArray = [...node.value, addNodeDefaultObject];
|
|
58
58
|
node.input(newArray, false);
|
|
59
59
|
};
|
|
60
60
|
data.removeNode = (node, index) => () => {
|
|
@@ -68,9 +68,11 @@ function useFormKitSchema() {
|
|
|
68
68
|
const array = [...node.value];
|
|
69
69
|
if (index < array.length - 1) node.input(swapElements(array, index, index + 1), false);
|
|
70
70
|
};
|
|
71
|
-
data.
|
|
71
|
+
data.copyNode = (node, index) => () => {
|
|
72
72
|
const obj = node.value[index];
|
|
73
|
-
const newArray = [...node.value,
|
|
73
|
+
const newArray = [...node.value, {
|
|
74
|
+
...obj
|
|
75
|
+
}];
|
|
74
76
|
node.input(newArray, false);
|
|
75
77
|
};
|
|
76
78
|
}
|
|
@@ -42,13 +42,13 @@ export function useFormKitSchema() {
|
|
|
42
42
|
children
|
|
43
43
|
};
|
|
44
44
|
};
|
|
45
|
-
function addListGroupFunctions(data) {
|
|
45
|
+
function addListGroupFunctions(data, addNodeDefaultObject = {}) {
|
|
46
46
|
const swapElements = (array, index1, index2) => {
|
|
47
47
|
array[index1] = array.splice(index2, 1, array[index1])[0];
|
|
48
48
|
return array;
|
|
49
49
|
};
|
|
50
50
|
data.addNode = (node) => () => {
|
|
51
|
-
const newArray = [...node.value,
|
|
51
|
+
const newArray = [...node.value, addNodeDefaultObject];
|
|
52
52
|
node.input(newArray, false);
|
|
53
53
|
};
|
|
54
54
|
data.removeNode = (node, index) => () => {
|
|
@@ -64,9 +64,9 @@ export function useFormKitSchema() {
|
|
|
64
64
|
if (index < array.length - 1)
|
|
65
65
|
node.input(swapElements(array, index, index + 1), false);
|
|
66
66
|
};
|
|
67
|
-
data.
|
|
67
|
+
data.copyNode = (node, index) => () => {
|
|
68
68
|
const obj = node.value[index];
|
|
69
|
-
const newArray = [...node.value, obj];
|
|
69
|
+
const newArray = [...node.value, { ...obj }];
|
|
70
70
|
node.input(newArray, false);
|
|
71
71
|
};
|
|
72
72
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sfxcode/formkit-primevue",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "1.9.
|
|
4
|
+
"version": "1.9.1",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "Tom",
|
|
7
7
|
"email": "tom@sfxcode.com"
|
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
"devDependencies": {
|
|
70
70
|
"@antfu/eslint-config": "2.8.0",
|
|
71
71
|
"@formkit/core": "^1.5.9",
|
|
72
|
-
"@types/node": "^20.11.
|
|
72
|
+
"@types/node": "^20.11.25",
|
|
73
73
|
"@unocss/preset-icons": "^0.58.5",
|
|
74
74
|
"@unocss/preset-uno": "0.58.5",
|
|
75
75
|
"@vitejs/plugin-vue": "^5.0.4",
|
|
@@ -89,7 +89,7 @@
|
|
|
89
89
|
"quill": "^1.3.7",
|
|
90
90
|
"sass": "^1.71.1",
|
|
91
91
|
"tslib": "^2.6.2",
|
|
92
|
-
"typescript": "^5.
|
|
92
|
+
"typescript": "^5.4.2",
|
|
93
93
|
"unbuild": "2.0.0",
|
|
94
94
|
"unocss": "^0.58.5",
|
|
95
95
|
"unplugin-auto-import": "^0.17.5",
|
|
@@ -104,7 +104,7 @@
|
|
|
104
104
|
"vue": "^3.4.21",
|
|
105
105
|
"vue-demi": "^0.14.7",
|
|
106
106
|
"vue-router": "^4.3.0",
|
|
107
|
-
"vue-tsc": "^2.0.
|
|
107
|
+
"vue-tsc": "^2.0.6"
|
|
108
108
|
},
|
|
109
109
|
"scripts": {
|
|
110
110
|
"build": "unbuild",
|