@sfxcode/formkit-primevue 2.4.19 → 2.5.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.
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
<script setup lang='ts'>
|
|
2
|
-
import { FormKit, FormKitSchema } from '@formkit/vue'
|
|
2
|
+
import { FormKit, FormKitMessages, FormKitSchema } from '@formkit/vue'
|
|
3
3
|
import { ref } from 'vue'
|
|
4
4
|
import FormKitDebug from './FormKitDebug.vue'
|
|
5
5
|
|
|
6
6
|
const props = defineProps({
|
|
7
|
+
id: {
|
|
8
|
+
type: String,
|
|
9
|
+
default: 'form',
|
|
10
|
+
},
|
|
7
11
|
data: {
|
|
8
12
|
type: Object,
|
|
9
13
|
default: null,
|
|
@@ -28,6 +32,10 @@ const props = defineProps({
|
|
|
28
32
|
type: String,
|
|
29
33
|
default: 'Save',
|
|
30
34
|
},
|
|
35
|
+
cancelLabel: {
|
|
36
|
+
type: String,
|
|
37
|
+
default: 'Cancel',
|
|
38
|
+
},
|
|
31
39
|
actionsClass: {
|
|
32
40
|
type: String,
|
|
33
41
|
default: '',
|
|
@@ -51,19 +59,23 @@ function handleSave() {
|
|
|
51
59
|
<template>
|
|
52
60
|
<div class="p-formkit-data-edit">
|
|
53
61
|
<FormKit
|
|
54
|
-
id="
|
|
62
|
+
:id="id"
|
|
55
63
|
v-model="formData"
|
|
56
64
|
:form-class="formClass"
|
|
57
65
|
:actions-class="actionsClass"
|
|
58
66
|
type="form"
|
|
59
|
-
:submit-label="submitLabel"
|
|
60
|
-
:submit-attrs="{
|
|
61
|
-
inputClass,
|
|
62
|
-
}"
|
|
63
67
|
@submit="handleSave"
|
|
64
68
|
>
|
|
65
|
-
<
|
|
66
|
-
|
|
69
|
+
<template #default>
|
|
70
|
+
<FormKitSchema v-if="formSchema" :schema="formSchema" :data="formData" />
|
|
71
|
+
<slot />
|
|
72
|
+
</template>
|
|
73
|
+
<template #messages>
|
|
74
|
+
<FormKitMessages class="p-formkit-data-edit-messages" />
|
|
75
|
+
</template>
|
|
76
|
+
<template #submit>
|
|
77
|
+
<Button type="submit" :label="submitLabel" @submit="handleSave" />
|
|
78
|
+
</template>
|
|
67
79
|
</FormKit>
|
|
68
80
|
<FormKitDebug v-if="debugData" :data="formData" header="Data" />
|
|
69
81
|
<FormKitDebug v-if="debugSchema" :data="formSchema" header="Schema" />
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
<script setup lang='ts'>
|
|
2
2
|
import type { FormKitFrameworkContext } from '@formkit/core'
|
|
3
3
|
import type { PropType } from 'vue'
|
|
4
|
+
import { computed } from 'vue'
|
|
5
|
+
import { useI18n } from 'vue-i18n'
|
|
4
6
|
import { useFormKitSection } from '../composables'
|
|
5
7
|
|
|
6
8
|
const props = defineProps({
|
|
@@ -10,6 +12,20 @@ const props = defineProps({
|
|
|
10
12
|
},
|
|
11
13
|
})
|
|
12
14
|
|
|
15
|
+
const textValue = computed(() => {
|
|
16
|
+
const value = props.context?._value
|
|
17
|
+
const { t } = useI18n()
|
|
18
|
+
if (value) {
|
|
19
|
+
if (props.context?.isTranslationKey)
|
|
20
|
+
return t(value)
|
|
21
|
+
else
|
|
22
|
+
return value
|
|
23
|
+
}
|
|
24
|
+
else {
|
|
25
|
+
return ''
|
|
26
|
+
}
|
|
27
|
+
})
|
|
28
|
+
|
|
13
29
|
const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
|
|
14
30
|
</script>
|
|
15
31
|
|
|
@@ -24,8 +40,8 @@ const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection
|
|
|
24
40
|
:style="context?.attrs?.style"
|
|
25
41
|
:class="context?.attrs?.class"
|
|
26
42
|
>
|
|
27
|
-
<span v-if="context?.html" v-html="
|
|
28
|
-
<span v-else v-text="
|
|
43
|
+
<span v-if="context?.html" v-html="textValue" />
|
|
44
|
+
<span v-else v-text="textValue" />
|
|
29
45
|
</span>
|
|
30
46
|
<span v-if="hasSuffix" class="formkit-suffix">
|
|
31
47
|
{{ context?.suffix }}
|
|
@@ -15,7 +15,7 @@ var _PrimeOutputReference = _interopRequireDefault(require("../components/PrimeO
|
|
|
15
15
|
var _PrimeOutputText = _interopRequireDefault(require("../components/PrimeOutputText.vue"));
|
|
16
16
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
17
17
|
const primeOutputTextDefinition = exports.primeOutputTextDefinition = (0, _vue.createInput)(_PrimeOutputText.default, {
|
|
18
|
-
props: ["prefix", "suffix", "iconPrefix", "iconSuffix", "html"]
|
|
18
|
+
props: ["prefix", "suffix", "iconPrefix", "iconSuffix", "isTranslationKey", "html"]
|
|
19
19
|
});
|
|
20
20
|
const primeOutputDateDefinition = exports.primeOutputDateDefinition = (0, _vue.createInput)(_PrimeOutputDate.default, {
|
|
21
21
|
props: ["prefix", "suffix", "iconPrefix", "iconSuffix"]
|
|
@@ -8,7 +8,7 @@ import PrimeOutputNumber from "../components/PrimeOutputNumber.vue";
|
|
|
8
8
|
import PrimeOutputReference from "../components/PrimeOutputReference.vue";
|
|
9
9
|
import PrimeOutputText from "../components/PrimeOutputText.vue";
|
|
10
10
|
export const primeOutputTextDefinition = createInput(PrimeOutputText, {
|
|
11
|
-
props: ["prefix", "suffix", "iconPrefix", "iconSuffix", "html"]
|
|
11
|
+
props: ["prefix", "suffix", "iconPrefix", "iconSuffix", "isTranslationKey", "html"]
|
|
12
12
|
});
|
|
13
13
|
export const primeOutputDateDefinition = createInput(PrimeOutputDate, {
|
|
14
14
|
props: ["prefix", "suffix", "iconPrefix", "iconSuffix"]
|
|
@@ -35,8 +35,8 @@ $grid-breakpoints: (
|
|
|
35
35
|
// General message item styling
|
|
36
36
|
.formkit-messages {
|
|
37
37
|
margin: 0.125rem 0;
|
|
38
|
-
padding-top: 0.
|
|
39
|
-
padding-left: 0;
|
|
38
|
+
padding-top: 0.5rem;
|
|
39
|
+
padding-left: 0.5rem;
|
|
40
40
|
}
|
|
41
41
|
|
|
42
42
|
.formkit-message {
|
|
@@ -51,6 +51,12 @@ $grid-breakpoints: (
|
|
|
51
51
|
.formkit-outer {
|
|
52
52
|
padding-bottom: 0.8rem;
|
|
53
53
|
|
|
54
|
+
.formkit-messages {
|
|
55
|
+
margin: 0.125rem 0;
|
|
56
|
+
padding-top: 0.25rem;
|
|
57
|
+
padding-left: 0;
|
|
58
|
+
}
|
|
59
|
+
|
|
54
60
|
.formkit-inner {
|
|
55
61
|
.p-formkit {
|
|
56
62
|
.p-formkit-icon {
|
|
@@ -163,6 +169,110 @@ $grid-breakpoints: (
|
|
|
163
169
|
}
|
|
164
170
|
}
|
|
165
171
|
|
|
172
|
+
// data view only
|
|
173
|
+
.p-formkit-data-view {
|
|
174
|
+
.formkit-form {
|
|
175
|
+
.formkit-outer {
|
|
176
|
+
padding-bottom: 0;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.formkit-help {
|
|
180
|
+
margin: 0;
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
// data edit only
|
|
186
|
+
.p-formkit-data-edit {
|
|
187
|
+
|
|
188
|
+
.formkit-form {
|
|
189
|
+
.formkit-label {
|
|
190
|
+
//font-weight: normal;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
// specific checkbox stylings
|
|
194
|
+
.formkit-outer[data-type="primeCheckbox"] {
|
|
195
|
+
//padding-left: 0;
|
|
196
|
+
|
|
197
|
+
.formkit-wrapper {
|
|
198
|
+
display: flex;
|
|
199
|
+
flex-wrap: wrap;
|
|
200
|
+
|
|
201
|
+
.formkit-inner {
|
|
202
|
+
width: auto !important;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
label {
|
|
206
|
+
width: auto;
|
|
207
|
+
order: 2;
|
|
208
|
+
padding: 0.125rem 0;
|
|
209
|
+
|
|
210
|
+
&:after {
|
|
211
|
+
content: "";
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
// styling of output when label is used in schema
|
|
215
|
+
+ .formkit-inner {
|
|
216
|
+
margin-left: 0 !important;
|
|
217
|
+
order: 1;
|
|
218
|
+
flex-basis: 2rem;
|
|
219
|
+
flex-grow: 0;
|
|
220
|
+
flex-shrink: 0;
|
|
221
|
+
overflow: hidden;
|
|
222
|
+
// styling of suffix when suffix is used in addition to label
|
|
223
|
+
&:has( label) {
|
|
224
|
+
flex-grow: 1;
|
|
225
|
+
flex-basis: 100%;
|
|
226
|
+
}
|
|
227
|
+
}
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
// styling when both prefix and suffix are used in schema
|
|
231
|
+
label:first-child:nth-last-child(3), label:first-child:nth-last-child(3) ~ label {
|
|
232
|
+
width: auto;
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
label:first-child:nth-last-child(3) {
|
|
236
|
+
order: 1;
|
|
237
|
+
|
|
238
|
+
+ div.p-checkbox {
|
|
239
|
+
order: 2;
|
|
240
|
+
width: auto;
|
|
241
|
+
}
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
label:first-child:nth-last-child(3) ~ label {
|
|
245
|
+
order: 3
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
// end styling when both prefix and suffix are used in schema
|
|
249
|
+
|
|
250
|
+
|
|
251
|
+
// styling of output when only suffix is used in schema
|
|
252
|
+
.formkit-inner:first-child {
|
|
253
|
+
margin-left: 0 !important;
|
|
254
|
+
|
|
255
|
+
.p-formkit {
|
|
256
|
+
display: flex;
|
|
257
|
+
}
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
.p-checkbox:not(:only-child) {
|
|
261
|
+
width: 2rem;
|
|
262
|
+
overflow: hidden;
|
|
263
|
+
}
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
.formkit-help {
|
|
267
|
+
width: auto !important;
|
|
268
|
+
//padding-left: 2rem;
|
|
269
|
+
}
|
|
270
|
+
}
|
|
271
|
+
}
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
|
|
275
|
+
|
|
166
276
|
// Debug
|
|
167
277
|
.p-formkit-data-debug {
|
|
168
278
|
pre, span {
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--formkit-error-color: #ef9a9a}.formkit-form .formkit-messages{margin:.125rem 0;padding-top:.
|
|
1
|
+
:root{--formkit-error-color: #ef9a9a}.formkit-form .formkit-messages{margin:.125rem 0;padding-top:.5rem;padding-left:.5rem}.formkit-form .formkit-message{list-style:none;padding:0;margin:0;color:var(--formkit-error-color);font-size:.8rem}.formkit-form .formkit-outer{padding-bottom:.8rem}.formkit-form .formkit-outer .formkit-messages{margin:.125rem 0;padding-top:.25rem;padding-left:0}.formkit-form .formkit-outer .formkit-inner .p-formkit .p-formkit-icon{box-sizing:border-box;width:100%}.formkit-form .formkit-outer .formkit-inner .p-formkit .p-inputtext,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-textarea,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-password,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-multiselect,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-select,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-editor{box-sizing:border-box;width:100%}.formkit-form .formkit-outer .formkit-inner .p-formkit .p-inputtext.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-textarea.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-password.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-multiselect.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-select.p-colorpicker-preview,.formkit-form .formkit-outer .formkit-inner .p-formkit .p-editor.p-colorpicker-preview{width:2rem}.formkit-form .formkit-outer .formkit-help{margin:.25rem 0 0 0;font-size:.8rem;color:var(--text-color-secondary)}.formkit-form .formkit-label{display:block;margin:0;padding-bottom:.5rem;font-weight:bold;font-size:.8rem}.formkit-form .p-formkit>*{margin-right:.5rem}.formkit-form .p-formkit>*:last-child,.formkit-form .p-formkit>*:only-child{margin-right:0}.formkit-form .p-formkit-options{display:flex;flex-wrap:wrap;gap:.5rem}.formkit-form .p-formkit-options .p-formkit-option{display:flex;align-items:center}.formkit-form .p-formkit-options .p-formkit-option label{margin-left:.5rem}.formkit-form .formkit-fieldset{margin:0;padding:0;border-radius:0;border:0}.formkit-form .formkit-fieldset:focus-within{border:0}.formkit-form .formkit-fieldset>.formkit-help{margin-top:0;margin-bottom:0}.formkit-form .formkit-legend{display:block;margin:0;padding:0}.formkit-form .formkit-actions{padding-top:.5rem}.formkit-form .p-action-buttons{margin-top:.25rem}.formkit-form .p-action-buttons .p-button{margin-right:.5rem}.formkit-form .p-action-buttons span .p-space{margin-right:3rem}.formkit-form .p-chip-item{align-items:center;background:var(--p-surface-500);color:var(--p-surface-0);border-radius:1rem;padding:.2rem .5rem}.p-formkit-data-view .formkit-form .formkit-outer{padding-bottom:0}.p-formkit-data-view .formkit-form .formkit-help{margin:0}.p-formkit-data-edit .formkit-form .formkit-outer[data-type=primeCheckbox] .formkit-wrapper{display:flex;flex-wrap:wrap}.p-formkit-data-edit .formkit-form .formkit-outer[data-type=primeCheckbox] .formkit-wrapper .formkit-inner{width:auto !important}.p-formkit-data-edit .formkit-form .formkit-outer[data-type=primeCheckbox] .formkit-wrapper label{width:auto;order:2;padding:.125rem 0}.p-formkit-data-edit .formkit-form .formkit-outer[data-type=primeCheckbox] .formkit-wrapper label:after{content:""}.p-formkit-data-edit .formkit-form .formkit-outer[data-type=primeCheckbox] .formkit-wrapper label+.formkit-inner{margin-left:0 !important;order:1;flex-basis:2rem;flex-grow:0;flex-shrink:0;overflow:hidden}.p-formkit-data-edit .formkit-form .formkit-outer[data-type=primeCheckbox] .formkit-wrapper label+.formkit-inner:has(label){flex-grow:1;flex-basis:100%}.p-formkit-data-edit .formkit-form .formkit-outer[data-type=primeCheckbox] .formkit-wrapper label:first-child:nth-last-child(3),.p-formkit-data-edit .formkit-form .formkit-outer[data-type=primeCheckbox] .formkit-wrapper label:first-child:nth-last-child(3)~label{width:auto}.p-formkit-data-edit .formkit-form .formkit-outer[data-type=primeCheckbox] .formkit-wrapper label:first-child:nth-last-child(3){order:1}.p-formkit-data-edit .formkit-form .formkit-outer[data-type=primeCheckbox] .formkit-wrapper label:first-child:nth-last-child(3)+div.p-checkbox{order:2;width:auto}.p-formkit-data-edit .formkit-form .formkit-outer[data-type=primeCheckbox] .formkit-wrapper label:first-child:nth-last-child(3)~label{order:3}.p-formkit-data-edit .formkit-form .formkit-outer[data-type=primeCheckbox] .formkit-wrapper .formkit-inner:first-child{margin-left:0 !important}.p-formkit-data-edit .formkit-form .formkit-outer[data-type=primeCheckbox] .formkit-wrapper .formkit-inner:first-child .p-formkit{display:flex}.p-formkit-data-edit .formkit-form .formkit-outer[data-type=primeCheckbox] .formkit-wrapper .p-checkbox:not(:only-child){width:2rem;overflow:hidden}.p-formkit-data-edit .formkit-form .formkit-outer[data-type=primeCheckbox] .formkit-help{width:auto !important}.p-formkit-data-debug pre,.p-formkit-data-debug span{font-size:.75rem;line-height:1rem}@media(min-width: 1024px){.formkit-form{display:flex;flex-wrap:wrap;margin-left:-0.5rem;margin-right:-0.5rem}.formkit-form>*{flex-shrink:0;width:100%;max-width:100%;padding-left:.5rem;padding-right:.5rem}.col-1{width:8.3333333333%}.col-2{width:16.6666666667%}.col-3{width:25%}.col-4{width:33.3333333333%}.col-5{width:41.6666666667%}.col-6{width:50%}.col-7{width:58.3333333333%}.col-8{width:66.6666666667%}.col-9{width:75%}.col-10{width:83.3333333333%}.col-11{width:91.6666666667%}.col-12{width:100%}}@media(min-width: 768px){.formkit-form.form-horizontal .formkit-wrapper{display:flex}.formkit-form.form-horizontal .formkit-wrapper label{display:inline-block;padding:0 .25rem 0 0;font-size:inherit}.formkit-form.form-horizontal .formkit-wrapper label:after{content:":"}.p-formkit-data-view .formkit-form.form-horizontal label{white-space:nowrap}.p-formkit-data-edit .formkit-form.form-horizontal .formkit-outer{width:100%}.p-formkit-data-edit .formkit-form.form-horizontal .formkit-outer label{@apply w-4/12;padding-top:.25rem;line-height:normal}.p-formkit-data-edit .formkit-form.form-horizontal .formkit-outer .formkit-inner{@apply w-8/12}.p-formkit-data-edit .formkit-form.form-horizontal div[data-type=primeCheckbox] .formkit-inner{margin-left:auto}.p-formkit-data-edit .formkit-form.form-horizontal div[data-type=primeCheckbox] .formkit-inner .p-formkit{display:flex}.p-formkit-data-edit .formkit-form.form-horizontal div[data-type=primeCheckbox] .formkit-inner label{width:auto;padding:0}.p-formkit-data-edit .formkit-form.form-horizontal .formkit-help,.p-formkit-data-edit .formkit-form.form-horizontal .formkit-messages{@apply w-8/12;margin-left:auto}}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sfxcode/formkit-primevue",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "2.
|
|
4
|
+
"version": "2.5.1",
|
|
5
5
|
"packageManager": "pnpm@9.11.0+sha256.1c0e33f70e5df9eede84a357bdfa0b1f9dba6e58194628d48a1055756f553754",
|
|
6
6
|
"author": {
|
|
7
7
|
"name": "Tom",
|
|
@@ -102,11 +102,11 @@
|
|
|
102
102
|
"@formkit/core": "^1.6.7",
|
|
103
103
|
"@primevue/themes": "4.0.7",
|
|
104
104
|
"@types/node": "^22.7.4",
|
|
105
|
-
"@unocss/preset-icons": "^0.63.
|
|
106
|
-
"@unocss/preset-uno": "^0.63.
|
|
105
|
+
"@unocss/preset-icons": "^0.63.2",
|
|
106
|
+
"@unocss/preset-uno": "^0.63.2",
|
|
107
107
|
"@vitejs/plugin-vue": "^5.1.4",
|
|
108
|
-
"@vitest/coverage-v8": "^2.1.
|
|
109
|
-
"@vitest/ui": "^2.1.
|
|
108
|
+
"@vitest/coverage-v8": "^2.1.2",
|
|
109
|
+
"@vitest/ui": "^2.1.2",
|
|
110
110
|
"@vue/compiler-sfc": "^3.5.10",
|
|
111
111
|
"@vue/server-renderer": "^3.5.10",
|
|
112
112
|
"@vue/test-utils": "^2.4.6",
|
|
@@ -127,17 +127,17 @@
|
|
|
127
127
|
"tslib": "^2.7.0",
|
|
128
128
|
"typescript": "^5.6.2",
|
|
129
129
|
"unbuild": "3.0.0-rc.8",
|
|
130
|
-
"unocss": "^0.63.
|
|
130
|
+
"unocss": "^0.63.2",
|
|
131
131
|
"unplugin-auto-import": "^0.18.3",
|
|
132
132
|
"unplugin-vue-components": "^0.27.4",
|
|
133
|
-
"vanilla-jsoneditor": "^1.0.
|
|
133
|
+
"vanilla-jsoneditor": "^1.0.6",
|
|
134
134
|
"vite": "^5.4.8",
|
|
135
135
|
"vite-plugin-dts": "4.2.2",
|
|
136
136
|
"vite-plugin-eslint": "^1.8.1",
|
|
137
137
|
"vite-plugin-pages": "^0.32.3",
|
|
138
138
|
"vite-ssg": "^0.23.8",
|
|
139
139
|
"vitepress": "^1.3.4",
|
|
140
|
-
"vitest": "^2.1.
|
|
140
|
+
"vitest": "^2.1.2",
|
|
141
141
|
"vue": "^3.5.10",
|
|
142
142
|
"vue-demi": "^0.14.10",
|
|
143
143
|
"vue-router": "^4.4.5",
|