@sfxcode/formkit-primevue 2.4.19 → 2.5.0
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,7 @@
|
|
|
1
1
|
<script setup lang='ts'>
|
|
2
2
|
import type { FormKitFrameworkContext } from '@formkit/core'
|
|
3
3
|
import type { PropType } from 'vue'
|
|
4
|
+
import { useI18n } from 'vue-i18n'
|
|
4
5
|
import { useFormKitSection } from '../composables'
|
|
5
6
|
|
|
6
7
|
const props = defineProps({
|
|
@@ -10,6 +11,20 @@ const props = defineProps({
|
|
|
10
11
|
},
|
|
11
12
|
})
|
|
12
13
|
|
|
14
|
+
const textValue = computed(() => {
|
|
15
|
+
const value = props.context?._value
|
|
16
|
+
const { t } = useI18n()
|
|
17
|
+
if (value) {
|
|
18
|
+
if (props.context?.isTranslationKey)
|
|
19
|
+
return t(value)
|
|
20
|
+
else
|
|
21
|
+
return value
|
|
22
|
+
}
|
|
23
|
+
else {
|
|
24
|
+
return ''
|
|
25
|
+
}
|
|
26
|
+
})
|
|
27
|
+
|
|
13
28
|
const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
|
|
14
29
|
</script>
|
|
15
30
|
|
|
@@ -24,8 +39,8 @@ const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection
|
|
|
24
39
|
:style="context?.attrs?.style"
|
|
25
40
|
:class="context?.attrs?.class"
|
|
26
41
|
>
|
|
27
|
-
<span v-if="context?.html" v-html="
|
|
28
|
-
<span v-else v-text="
|
|
42
|
+
<span v-if="context?.html" v-html="textValue" />
|
|
43
|
+
<span v-else v-text="textValue" />
|
|
29
44
|
</span>
|
|
30
45
|
<span v-if="hasSuffix" class="formkit-suffix">
|
|
31
46
|
{{ 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.0",
|
|
5
5
|
"packageManager": "pnpm@9.11.0+sha256.1c0e33f70e5df9eede84a357bdfa0b1f9dba6e58194628d48a1055756f553754",
|
|
6
6
|
"author": {
|
|
7
7
|
"name": "Tom",
|
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
"dev": "vite serve dev",
|
|
73
73
|
"dev:build": "vite build dev",
|
|
74
74
|
"dev:preview": "vite preview dev",
|
|
75
|
-
"release": "npm run lint && npm run build && changelogen --
|
|
75
|
+
"release": "npm run lint && npm run build && changelogen --minor --release && npm publish --access public && git push --follow-tags",
|
|
76
76
|
"lint": "eslint ./src",
|
|
77
77
|
"lint:fix": "eslint . --fix",
|
|
78
78
|
"prepublishOnly": "pnpm build",
|