Skip to content

Commit 71aae45

Browse files
sfxcodesfxcode
committed
refactor: use styleClass and some functions from useFormKitInput
Add wrapperClass to context
1 parent 12368c0 commit 71aae45

22 files changed

+123
-212
lines changed

‎src/components/PrimeAutoComplete.vue‎

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
<script setup lang='ts'>
2-
import { type PropType, computed, ref } from 'vue'
2+
import { type PropType, ref } from 'vue'
33
import type { FormKitFrameworkContext } from '@formkit/core'
44
55
import type { AutoCompleteCompleteEvent, AutoCompleteProps } from 'primevue/autocomplete'
6+
import { useFormKitInput } from '../composables'
67
78
export interface FormKitPrimeAutoCompleteProps {
89
pt?: AutoCompleteProps['pt']
@@ -11,6 +12,7 @@ export interface FormKitPrimeAutoCompleteProps {
1112
dropdown?: AutoCompleteProps['dropdown']
1213
multiple?: AutoCompleteProps['multiple']
1314
typeahead?: AutoCompleteProps['typeahead']
15+
wrapperClass?: string
1416
}
1517
1618
const props = defineProps({
@@ -20,25 +22,17 @@ const props = defineProps({
2022
},
2123
})
2224
25+
const { styleClass, wrapperClass, handleInput, handleBlur } = useFormKitInput(props.context)
26+
2327
const suggestions = ref([])
2428
2529
function search(event: AutoCompleteCompleteEvent) {
2630
suggestions.value = props.context?.attrs.complete(event.query)
2731
}
28-
29-
function handleInput(_: any) {
30-
props.context?.node.input(props.context?._value)
31-
}
32-
33-
function handleBlur(event: Event) {
34-
props.context?.handlers.blur(event)
35-
}
36-
37-
const styleClass = computed(() => (props.context?.state.validationVisible && !props.context?.state.valid) ? `${props.context?.attrs?.class} p-invalid` : props.context?.attrs?.class)
3832
</script>
3933

4034
<template>
41-
<div class="p-formkit">
35+
<div :class="wrapperClass">
4236
<AutoComplete
4337
:id="context.id"
4438
v-model="context._value"
@@ -51,7 +45,7 @@ const styleClass = computed(() => (props.context?.state.validationVisible && !pr
5145
:suggestions="suggestions"
5246
:dropdown="context?.dropdown ?? false"
5347
:multiple="context?.multiple ?? false"
54-
:typeahead="context?.attrs.typeahead ?? true"
48+
:typeahead="context?.typeahead ?? true"
5549
:pt="context?.pt"
5650
:pt-options="context?.ptOptions"
5751
:unstyled="context?.unstyled ?? false"

‎src/components/PrimeCascadeSelect.vue‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
<script setup lang='ts'>
2-
import { type PropType, computed } from 'vue'
2+
import type { PropType } from 'vue'
33
import type { FormKitFrameworkContext } from '@formkit/core'
44
55
import type { CascadeSelectProps } from 'primevue/cascadeselect'
6+
import { useFormKitInput } from '../composables'
67
78
export interface FormKitPrimeCascadeSelectProps {
89
options?: CascadeSelectProps['options']
@@ -14,6 +15,7 @@ export interface FormKitPrimeCascadeSelectProps {
1415
pt?: CascadeSelectProps['pt']
1516
ptOptions?: CascadeSelectProps['ptOptions']
1617
unstyled?: CascadeSelectProps['unstyled']
18+
wrapperClass?: string
1719
}
1820
1921
const props = defineProps({
@@ -23,19 +25,11 @@ const props = defineProps({
2325
},
2426
})
2527
26-
function handleInput(_: any) {
27-
props.context?.node.input(props.context?._value)
28-
}
29-
30-
function handleBlur(e: Event) {
31-
props.context?.handlers.blur(e)
32-
}
33-
34-
const styleClass = computed(() => (props.context?.state.validationVisible && !props.context?.state.valid) ? `${props.context?.attrs?.class} p-invalid` : props.context?.attrs?.class)
28+
const { styleClass, wrapperClass, handleInput, handleBlur } = useFormKitInput(props.context)
3529
</script>
3630

3731
<template>
38-
<div class="p-formkit">
32+
<div :class="wrapperClass">
3933
<CascadeSelect
4034
:id="context.id"
4135
v-model="context._value"

‎src/components/PrimeCheckbox.vue‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
<script setup lang='ts'>
2-
import { type PropType, computed } from 'vue'
2+
import type { PropType } from 'vue'
33
import type { FormKitFrameworkContext } from '@formkit/core'
44
55
import type { CheckboxProps } from 'primevue/checkbox'
6+
import { useFormKitInput } from '../composables'
67
78
export interface FormKitPrimeCheckboxProps {
89
binary?: CheckboxProps['binary']
@@ -11,8 +12,11 @@ export interface FormKitPrimeCheckboxProps {
1112
pt?: CheckboxProps['pt']
1213
ptOptions?: CheckboxProps['ptOptions']
1314
unstyled?: CheckboxProps['unstyled']
15+
indeterminate?: CheckboxProps['indeterminate']
16+
variant?: CheckboxProps['variant']
1417
labelLeft?: string
1518
labelRight?: string
19+
wrapperClass?: string
1620
}
1721
1822
const props = defineProps({
@@ -22,19 +26,11 @@ const props = defineProps({
2226
},
2327
})
2428
25-
function handleInput(_: any) {
26-
props.context?.node.input(props.context?._value)
27-
}
28-
29-
function handleBlur(e: Event) {
30-
props.context?.handlers.blur(e)
31-
}
32-
33-
const styleClass = computed(() => (props.context?.state.validationVisible && !props.context?.state.valid) ? `${props.context?.attrs?.class} p-invalid` : props.context?.attrs?.class)
29+
const { styleClass, wrapperClass, handleInput, handleBlur } = useFormKitInput(props.context)
3430
</script>
3531

3632
<template>
37-
<div class="p-formkit">
33+
<div :class="wrapperClass">
3834
<span v-if="context.labelLeft" class="formkit-prime-left">{{ context.labelLeft }}</span>
3935
<Checkbox
4036
v-model="context._value"
@@ -47,7 +43,9 @@ const styleClass = computed(() => (props.context?.state.validationVisible && !pr
4743
:tabindex="context?.attrs.tabindex"
4844
:aria-label="context?.attrs.ariaLabel"
4945
:aria-labelledby="context?.attrs.ariaLabelledby"
46+
:indeterminate="context.indeterminate ?? null"
5047
:binary="context.binary ?? true"
48+
:variant="context.variant ?? 'outlined'"
5149
:true-value="context.trueValue ?? undefined"
5250
:false-value="context.falseValue ?? undefined"
5351
:pt="context.pt"

‎src/components/PrimeColorPicker.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import type { PropType } from 'vue'
33
import type { FormKitFrameworkContext } from '@formkit/core'
44
55
import type { ColorPickerProps } from 'primevue/colorpicker'
6+
import { useFormKitInput } from '../composables'
67
78
export interface FormKitPrimeColorPickerProps {
89
defaultColor?: ColorPickerProps['defaultColor']
@@ -11,6 +12,7 @@ export interface FormKitPrimeColorPickerProps {
1112
pt?: ColorPickerProps['pt']
1213
ptOptions?: ColorPickerProps['ptOptions']
1314
unstyled?: ColorPickerProps['unstyled']
15+
wrapperClass?: string
1416
}
1517
1618
const props = defineProps({
@@ -20,13 +22,11 @@ const props = defineProps({
2022
},
2123
})
2224
23-
function handleChange(_: any) {
24-
props.context?.node.input(props.context?._value)
25-
}
25+
const { wrapperClass, handleChange } = useFormKitInput(props.context)
2626
</script>
2727

2828
<template>
29-
<div class="p-formkit">
29+
<div :class="wrapperClass">
3030
<ColorPicker
3131
v-model="context._value"
3232
v-bind="context?.attrs"

‎src/components/PrimeDatePicker.vue‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
<script setup lang='ts'>
2-
import { type PropType, computed } from 'vue'
2+
import type { PropType } from 'vue'
33
import type { FormKitFrameworkContext } from '@formkit/core'
44
55
import type { DatePickerBlurEvent, DatePickerProps } from 'primevue/datepicker'
6+
import { useFormKitInput } from '../composables'
67
78
export interface FormKitPrimeDatePickerProps {
89
dateFormat?: DatePickerProps['dateFormat']
@@ -48,6 +49,7 @@ export interface FormKitPrimeDatePickerProps {
4849
pt?: DatePickerProps['pt']
4950
ptOptions?: DatePickerProps['ptOptions']
5051
unstyled?: DatePickerProps['unstyled']
52+
wrapperClass?: string
5153
}
5254
5355
const props = defineProps({
@@ -57,13 +59,7 @@ const props = defineProps({
5759
},
5860
})
5961
60-
function handleInput(_: any) {
61-
props.context?.node.input(props.context?._value)
62-
}
63-
64-
function handleSelect(e: any) {
65-
props.context?.node.input(e)
66-
}
62+
const { styleClass, wrapperClass, handleInput, handleSelect } = useFormKitInput(props.context)
6763
6864
function handleBlur(e: DatePickerBlurEvent) {
6965
props.context?.handlers.blur(e.originalEvent)
@@ -72,12 +68,10 @@ function handleBlur(e: DatePickerBlurEvent) {
7268
function handleClearClick() {
7369
props.context?.node.input(null)
7470
}
75-
76-
const styleClass = computed(() => (props.context?.state.validationVisible && !props.context?.state.valid) ? `${props.context?.attrs?.class} p-invalid` : props.context?.attrs?.class)
7771
</script>
7872

7973
<template>
80-
<div class="p-formkit">
74+
<div :class="wrapperClass">
8175
<DatePicker
8276
v-model="context._value"
8377
v-bind="context?.attrs"

‎src/components/PrimeEditor.vue‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
<script setup lang="ts">
2-
import { type PropType, computed } from 'vue'
2+
import type { PropType } from 'vue'
33
import type { FormKitFrameworkContext } from '@formkit/core'
44
55
import type { EditorProps, EditorSelectionChangeEvent } from 'primevue/editor'
6+
import { useFormKitInput } from '../composables'
67
78
export interface FormKitPrimeEditorProps {
89
placeholder?: EditorProps['placeholder']
@@ -11,6 +12,7 @@ export interface FormKitPrimeEditorProps {
1112
pt?: EditorProps['pt']
1213
ptOptions?: EditorProps['ptOptions']
1314
unstyled?: EditorProps['unstyled']
15+
wrapperClass?: string
1416
}
1517
1618
const props = defineProps({
@@ -20,20 +22,16 @@ const props = defineProps({
2022
},
2123
})
2224
23-
function handleInput(e: any) {
24-
props.context?.node.input(e.htmlValue)
25-
}
25+
const { styleClass, wrapperClass, handleInput } = useFormKitInput(props.context)
2626
2727
function handleSelection(e: EditorSelectionChangeEvent) {
2828
if (e.range === null)
2929
props.context?.handlers.blur(e.htmlValue)
3030
}
31-
32-
const styleClass = computed(() => (props.context?.state.validationVisible && !props.context?.state.valid) ? `${props.context?.attrs?.class} p-invalid` : props.context?.attrs?.class)
3331
</script>
3432

3533
<template>
36-
<div class="p-formkit">
34+
<div :class="wrapperClass">
3735
<Editor
3836
:id="context.id"
3937
v-model="context._value"

‎src/components/PrimeInputMask.vue‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
<script setup lang='ts'>
2-
import { type PropType, computed } from 'vue'
2+
import type { PropType } from 'vue'
33
import type { FormKitFrameworkContext } from '@formkit/core'
44
55
import type { InputMaskProps } from 'primevue/inputmask'
6+
import { useFormKitInput } from '../composables'
67
78
export interface FormKitPrimeInputMaskProps {
89
mask?: InputMaskProps['mask']
@@ -16,6 +17,7 @@ export interface FormKitPrimeInputMaskProps {
1617
variant?: InputMaskProps['variant']
1718
iconLeft?: string
1819
iconRight?: string
20+
wrapperClass?: string
1921
}
2022
2123
const props = defineProps({
@@ -25,6 +27,8 @@ const props = defineProps({
2527
},
2628
})
2729
30+
const { styleClass, wrapperClass } = useFormKitInput(props.context)
31+
2832
function handleInput(e: FocusEvent) {
2933
props.context?.node.input(props.context?._value)
3034
props.context?.handlers.blur(e)
@@ -46,12 +50,10 @@ function spanClass() {
4650
result = `${result}p-input-icon-right `
4751
return result
4852
}
49-
50-
const styleClass = computed(() => (props.context?.state.validationVisible && !props.context?.state.valid) ? `${props.context?.attrs?.class} p-invalid` : props.context?.attrs?.class)
5153
</script>
5254

5355
<template>
54-
<div class="p-formkit">
56+
<div :class="wrapperClass">
5557
<span :class="spanClass()">
5658
<i v-if="hasLeftIcon()" :class="context.iconLeft" />
5759

‎src/components/PrimeInputNumber.vue‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
<script setup lang='ts'>
2-
import { type PropType, computed } from 'vue'
2+
import type { PropType } from 'vue'
33
import type { FormKitFrameworkContext } from '@formkit/core'
44
55
import type { InputNumberBlurEvent, InputNumberProps } from 'primevue/inputnumber'
6+
import { useFormKitInput } from '../composables'
67
78
export interface FormKitPrimeInputNumberProps {
89
useGrouping?: InputNumberProps['useGrouping']
@@ -22,6 +23,7 @@ export interface FormKitPrimeInputNumberProps {
2223
ptOptions?: InputNumberProps['ptOptions']
2324
unstyled?: InputNumberProps['unstyled']
2425
placeholder?: InputNumberProps['placeholder']
26+
wrapperClass?: string
2527
}
2628
2729
const props = defineProps({
@@ -31,18 +33,15 @@ const props = defineProps({
3133
},
3234
})
3335
36+
const { styleClass, wrapperClass, handleInput } = useFormKitInput(props.context)
37+
3438
function handleBlur(e: InputNumberBlurEvent) {
3539
props.context?.handlers.blur(e.originalEvent)
3640
}
37-
38-
function handleInput(e: any) {
39-
props.context?.node.input(e.value)
40-
}
41-
const styleClass = computed(() => (props.context?.state.validationVisible && !props.context?.state.valid) ? `${props.context?.attrs?.class} p-invalid` : props.context?.attrs?.class)
4241
</script>
4342

4443
<template>
45-
<div class="p-formkit">
44+
<div :class="wrapperClass">
4645
<InputNumber
4746
v-model="context._value"
4847
v-bind="context?.attrs"

‎src/components/PrimeInputOtp.vue‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
<script setup lang='ts'>
2-
import { type PropType, computed } from 'vue'
2+
import type { PropType } from 'vue'
33
import type { FormKitFrameworkContext } from '@formkit/core'
44
55
import type { InputOtpProps } from 'primevue/inputotp'
6+
import { useFormKitInput } from '../composables'
67
78
export interface FormKitPrimeInputOtpProps {
89
unstyled?: InputOtpProps['unstyled']
@@ -12,6 +13,7 @@ export interface FormKitPrimeInputOtpProps {
1213
variant?: InputOtpProps['variant']
1314
mask?: InputOtpProps['mask']
1415
integerOnly?: InputOtpProps['integerOnly']
16+
wrapperClass?: string
1517
}
1618
1719
const props = defineProps({
@@ -21,19 +23,11 @@ const props = defineProps({
2123
},
2224
})
2325
24-
function handleInput(_: any) {
25-
props.context?.node.input(props.context?._value)
26-
}
27-
28-
function handleBlur(e: Event) {
29-
props.context?.handlers.blur(e)
30-
}
31-
32-
const styleClass = computed(() => (props.context?.state.validationVisible && !props.context?.state.valid) ? `${props.context?.attrs?.class} p-invalid` : props.context?.attrs?.class)
26+
const { styleClass, wrapperClass, handleBlur, handleInput } = useFormKitInput(props.context)
3327
</script>
3428

3529
<template>
36-
<div class="p-formkit">
30+
<div :class="wrapperClass">
3731
<InputOtp
3832
:id="context.id"
3933
v-model="context._value"

0 commit comments

Comments
 (0)