Skip to content

Commit 87a3119

Browse files
sfxcodesfxcode
committed
feat(slots): Support Slots
Add Slots to PrimeVue inputs that are using slots #58
1 parent 58502ff commit 87a3119

15 files changed

+92
-29
lines changed

‎src/components/PrimeAutoComplete.vue‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const props = defineProps({
2121
},
2222
})
2323
24-
const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
24+
const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
2525
2626
const suggestions = ref([])
2727
@@ -53,6 +53,10 @@ function search(event: AutoCompleteCompleteEvent) {
5353
@complete="search"
5454
@change="handleInput"
5555
@blur="handleBlur"
56-
/>
56+
>
57+
<template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
58+
<component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
59+
</template>
60+
</AutoComplete>
5761
</div>
5862
</template>

‎src/components/PrimeCascadeSelect.vue‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const props = defineProps({
2525
},
2626
})
2727
28-
const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
28+
const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
2929
</script>
3030

3131
<template>
@@ -52,6 +52,10 @@ const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.c
5252
:unstyled="unstyled"
5353
@change="handleInput"
5454
@blur="handleBlur"
55-
/>
55+
>
56+
<template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
57+
<component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
58+
</template>
59+
</CascadeSelect>
5660
</div>
5761
</template>

‎src/components/PrimeCheckbox.vue‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const props = defineProps({
2525
2626
const { hasPrefix, hasSuffix, generateId } = useFormKitSection(props.context)
2727
28-
const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
28+
const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
2929
3030
const generatedId = generateId()
3131
</script>
@@ -57,7 +57,11 @@ const generatedId = generateId()
5757
:unstyled="unstyled"
5858
@change="handleInput"
5959
@blur="handleBlur"
60-
/>
60+
>
61+
<template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
62+
<component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
63+
</template>
64+
</Checkbox>
6165
<label v-if="hasSuffix" :for="generatedId" class="formkit-suffix">
6266
{{ context?.suffix }}
6367
</label>

‎src/components/PrimeDatePicker.vue‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ const props = defineProps({
5959
},
6060
})
6161
62-
const { unstyled, isInvalid, handleInput, handleSelect } = useFormKitInput(props.context)
62+
const { validSlotNames, unstyled, isInvalid, handleInput, handleSelect } = useFormKitInput(props.context)
6363
6464
function handleBlur(e: DatePickerBlurEvent) {
6565
props.context?.handlers.blur(e.originalEvent)
@@ -132,6 +132,10 @@ function handleClearClick() {
132132
@input="handleInput"
133133
@blur="handleBlur"
134134
@clear-click="handleClearClick"
135-
/>
135+
>
136+
<template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
137+
<component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
138+
</template>
139+
</DatePicker>
136140
</div>
137141
</template>

‎src/components/PrimeInputNumber.vue‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const props = defineProps({
3434
},
3535
})
3636
37-
const { unstyled, isInvalid } = useFormKitInput(props.context)
37+
const { validSlotNames, unstyled, isInvalid } = useFormKitInput(props.context)
3838
3939
function handleBlur(e: InputNumberBlurEvent) {
4040
props.context?.handlers.blur(e.originalEvent)
@@ -99,6 +99,10 @@ watch(
9999
:unstyled="unstyled"
100100
@input="handleInput"
101101
@blur="handleBlur"
102-
/>
102+
>
103+
<template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
104+
<component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
105+
</template>
106+
</InputNumber>
103107
</div>
104108
</template>

‎src/components/PrimeInputOtp.vue‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const props = defineProps({
2323
},
2424
})
2525
26-
const { unstyled, isInvalid, handleBlur, handleInput } = useFormKitInput(props.context)
26+
const { validSlotNames, unstyled, isInvalid, handleBlur, handleInput } = useFormKitInput(props.context)
2727
</script>
2828

2929
<template>
@@ -49,6 +49,10 @@ const { unstyled, isInvalid, handleBlur, handleInput } = useFormKitInput(props.c
4949
:unstyled="unstyled"
5050
@change="handleInput"
5151
@blur="handleBlur"
52-
/>
52+
>
53+
<template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
54+
<component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
55+
</template>
56+
</InputOtp>
5357
</div>
5458
</template>

‎src/components/PrimeListbox.vue‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const props = defineProps({
3030
},
3131
})
3232
33-
const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
33+
const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
3434
</script>
3535

3636
<template>
@@ -63,6 +63,10 @@ const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.c
6363
:unstyled="unstyled"
6464
@change="handleInput"
6565
@blur="handleBlur"
66-
/>
66+
>
67+
<template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
68+
<component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
69+
</template>
70+
</Listbox>
6771
</div>
6872
</template>

‎src/components/PrimeMultiSelect.vue‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ const props = defineProps({
5151
},
5252
})
5353
54-
const { unstyled, isInvalid, handleBlur, handleChange } = useFormKitInput(props.context)
54+
const { validSlotNames, unstyled, isInvalid, handleBlur, handleChange } = useFormKitInput(props.context)
5555
</script>
5656

5757
<template>
@@ -105,6 +105,10 @@ const { unstyled, isInvalid, handleBlur, handleChange } = useFormKitInput(props.
105105
:unstyled="unstyled"
106106
@change="handleChange"
107107
@blur="handleBlur"
108-
/>
108+
>
109+
<template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
110+
<component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
111+
</template>
112+
</MultiSelect>
109113
</div>
110114
</template>

‎src/components/PrimePassword.vue‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const props = defineProps({
3030
},
3131
})
3232
33-
const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
33+
const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
3434
</script>
3535

3636
<template>
@@ -63,6 +63,10 @@ const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.c
6363
:unstyled="unstyled"
6464
@input="handleInput"
6565
@blur="handleBlur"
66-
/>
66+
>
67+
<template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
68+
<component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
69+
</template>
70+
</Password>
6771
</div>
6872
</template>

‎src/components/PrimeRating.vue‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const props = defineProps({
2222
},
2323
})
2424
25-
const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
25+
const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
2626
</script>
2727

2828
<template>
@@ -47,6 +47,10 @@ const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.c
4747
:unstyled="unstyled"
4848
@change="handleInput"
4949
@blur="handleBlur"
50-
/>
50+
>
51+
<template v-for="slotName in validSlotNames" :key="slotName" #[slotName]="slotProps">
52+
<component :is="context?.slots[slotName]" v-bind="{ ...context, ...slotProps }" />
53+
</template>
54+
</Rating>
5155
</div>
5256
</template>

0 commit comments

Comments
 (0)